通过 AJAX 发送 HTML 复选框表单数据

Question

我有一个 HTML 表单设置如下：

<form class="modal-content start-planning " id="ProfileStep2" name="ProfileStep2" method="POST">
                    <div class="planroll-nav">
                        <a href="#" class="prev" onclick="GoToStep('ProfileStep1')">Back</a>
                        <span>2 / 8</span>
                        <a href="#" class="next" onclick="GoToStep('ProfileStep3')">Skip</a>
                    </div>
                    <div class="planroll-imgbx" style="background-image:url(images/icon/pic2.png)"></div>
                    <div class="start-here-bx">
                        <div class="">
                            <div class="planroll-title">
                                <h3>Select up to 5 ideal Wedding Styles...</h3>
                            </div>
                            <input type="hidden" id="userid" name="userid" value="<? echo $user_id; ?>">
                            <ul class="select-list clearfix list-inline list-2">
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style1" name="style1" value="Traditional">
                                        <label class="custom-control-label" for="style1">Traditional</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style2" name="style2" value="Alternative">
                                        <label class="custom-control-label" for="style2">Alternative</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style3" name="style3" value="Festival">
                                        <label class="custom-control-label" for="style3">Festival</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style4" name="style4" value="Goth">
                                        <label class="custom-control-label" for="style4">Goth</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style5" name="style5" value="Urban">
                                        <label class="custom-control-label" for="style5">Urban</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style6" name="style6" value="DIY">
                                        <label class="custom-control-label" for="style6">DIY</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style7" name="style7" value="Rustic">
                                        <label class="custom-control-label" for="style7">Rustic</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style8" name="style8" value="Historical">
                                        <label class="custom-control-label" for="style8">Historical</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style9" name="style9" value="Religious">
                                        <label class="custom-control-label" for="style9">Religious</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style10" name="style10" value="Vintage">
                                        <label class="custom-control-label" for="style10">Vintage</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style11" name="style11" value="Elegant">
                                        <label class="custom-control-label" for="style11">Elegant</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style12" name="style12" value="Themed">
                                        <label class="custom-control-label" for="style12">Themed</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style13" name="style13" value="Vegan">
                                        <label class="custom-control-label" for="style13">Vegan</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style14" name="style14" value="Eco-Friendly">
                                        <label class="custom-control-label" for="style14">Eco-Friendly</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style15" name="style15" value="Musical">
                                        <label class="custom-control-label" for="style15">Musical</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style16" name="style16" value="Boho">
                                        <label class="custom-control-label" for="style16">Boho</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style17" name="style17" value="Country">
                                        <label class="custom-control-label" for="style17">Country</label>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="modal-footer text-center">
                        <button type="submit" id="ProfileStep2" name="ProfileStep2" class="btn gradient" data-toggle="tooltip" data-placement="top" onclick="GoToStep('ProfileStep3')" title="Congrats! Even your names look great together.">Next Step</button>
                    </div>
                </form>

我正在尝试使用以下脚本

通过表单提交上的AJAX脚本传递数据

$(document).ready(function(){
                $('#ProfileStep2').on('submit', function(e){
                    
                    //Stop the form from submitting itself to the server.
                    e.preventDefault();
                    var userid2 = $('#userid').val();
                    var style1 = $('#style1').val();
                    var style2 = $('#style2').val();
                    var style3 = $('#style3').val();
                    var style4 = $('#style4').val();
                    var style5 = $('#style5').val();
                    var style6 = $('#style6').val();
                    var style7 = $('#style7').val();
                    var style8 = $('#style8').val();
                    var style9 = $('#style9').val();
                    var style10 = $('#style10').val();
                    var style11 = $('#style11').val();
                    var style12 = $('#style12').val();
                    var style13 = $('#style13').val();
                    var style14 = $('#style14').val();
                    $.ajax({
                        type: "POST",
                        url: 'system/wedmanagerdata.php',
                        data: {userid2: userid2, style1: style1, style2: style2, style3: style3, style4: style4, style5: style5, style6: style6, style7: style7, style8: style8, style9: style9, style10: style10, style11: style11, style12: style12, style13: style13, style14: style14},
                        success: function(data){
                            alert(data);
                        }
                    });
                });
            });

然后在 PHP 端，我用一个简单的 PHP 脚本处理数据

$userid2 = false;
if(isset($_POST['userid2'])){
    $userid2 = $conn->real_escape_string($_POST['userid2']);
    $style1 = $conn->real_escape_string($_POST['style1']);
    $style2 = $conn->real_escape_string($_POST['style2']);

}

我不得不尝试这种方式，因为如果不刷新页面或破坏 AJAX 脚本，我就无法让脚本将输入作为 id="style[]" 工作。问题是，AJAX 正在为复选框的位置发送常量，这意味着所有变量都在显示，而不仅仅是选中的变量？如果有人有更好的功能方法可以帮助我，那就太好了？

Answer 1

你可以大大简化这个。

首先将所有样式名称包含在一个数组中：

    $styles = ["Traditional","Alternative","Goth"];  // Add the others, and more


// Create the <ul> and <li> tags

echo '<ul class="select-list clearfix list-inline list-2" > ';

for ($i=0; $i<count($styles);$i++) {
    echo <<<EOT
       <li>
           <div class="custom-control custom-checkbox checkbox-lg">
           <input type="checkbox" class="custom-control-input" id="style{$i}" name="style[]" value="{$styles[$i]}">
           <label class="custom-control-label" for="style{$i}">$styles[$i]</label>
           </div>
       </li>
EOT;
}
echo "</ul>";

现在，在您的 AJAX 调用中，使用 $.serialize 获取表单数据

    $(document).ready(function () {
        $('#ProfileStep2').on('submit', function (e) {

//Stop the form from submitting itself to the server.
            e.preventDefault();
            form_data = $(this).serialize();
            $.ajax({
                type: "POST",
                url: 'system/wedmanagerdata.php',
                data: form_data,
                success: function (data) {
                    alert(data);
                }
            });
        });
    });

在您的 wedmanagerdata.php 脚本中，您应该会在 $_POST['style'].

中看到您选中的样式名称（并且只有选中的样式名称）

通过 AJAX 发送 HTML 复选框表单数据

Send HTML Checkbox Form Data through AJAX

html

php

forms

ajax

checkbox