无法使用 jquery AJAX PHP 为复选框创建数组

Unable to create array for checkboxes with jquery AJAX PHP

本文关键字：复选框 创建 数组 PHP AJAX jquery      更新时间：2023-09-26

我很接近，但错过了一些东西。我试图使用 jquery 将多个复选框的变量传递给 php 页面。我的代码： 

<div id="students">
    <div class="field">
        <label>
            <input type="checkbox" name="pupil[a]" value="a" id="pupil"/>
            Pupil A
        </label>
    </div>
    <div class="field">
        <label>
            <input type="checkbox" name="pupil[b]" value="b" id="pupil"/>
            Pupil B
        </label>
    </div>
    <div class="field">
        <label>
            <input type="checkbox" name="pupil[c]" value="c" id="pupil"/>
            Pupil C
        </label>
    </div>
</div>
<br /><br />
<div id="occupation">
    <div class="field">
        <label>
            <input type="checkbox" name="occupation[Software]" value="Software" id="occupation"/>
            Software
        </label>
    </div>
    <div class="field">
        <label>
            <input type="checkbox" name="occupation[Marketing]" value="Marketing" id="occupation"/>
            Marketing
        </label>
    </div> 
    <div class="field">
        <label>
            <input type="checkbox" name="occupation[Teacher]" value="Teacher" id="occupation"/>
            Teacher
        </label>
    </div>
</div>

我的查询：

$(document).ready(function(){
    $(":checkbox").on('change', function() {
        var val = [];
        var myval = []; //defining to pass with AJAX
        var theval =[]; //defining to pass with AJAX
        $(':checkbox:checked').each(function(i){
          myval[i] = $(this).attr('id');
          theval[i] = $(this).attr('name');
          var newval = myval[i] +"="+ myval[i];

          $.ajax({ 
        type: "POST", 
        url: 'draftdata.php',
        data : { newval},      //tried this and 
        data : {myval : theval},  // and tried this too
        success: function(data){
        $("#result").html(data);
        }
        });
});
});
});

我只想将复选框中选中的数据传递给 php。可能有多个复选框组，因此无法定义$_POST['desiredValue']。所以我只能检查它是否由if(isset($_POST['desiredValue']))设置.

当我检查软件，营销和教师以及草稿数据时.php做一个print_r($_POST[])，我得到： 

Array
(
    [myval] => Array
        (
            [0] => Software
            [1] => Marketing
            [2] => Teacher
        )
)

我想要得到的是： 

Array
(
    [0] => 'occupation' = 'Software'
    [1] => 'occupation' = 'Marketing'
    [2] => 'occupation' = 'Teacher'
)

我错过了什么？

谢谢。

我以这种方式修改了您的 html 代码，

    <form id="myform" class="" action="draftdata.php" method="post">
        <div id="students">
            <div class="field">
                <label>
                    <input type="checkbox" name="pupil[]" value="a" id="pupil" /> Pupil A
                </label>
            </div>
            <div class="field">
                <label>
                    <input type="checkbox" name="pupil[]" value="b" id="pupil" /> Pupil B
                </label>
            </div>
            <div class="field">
                <label>
                    <input type="checkbox" name="pupil[]" value="c" id="pupil" /> Pupil C
                </label>
            </div>
        </div>
        <br />
        <br />
        <div id="occupation">
            <div class="field">
                <label>
                    <input type="checkbox" name="occupation[]" value="Software" id="occupation" /> Software
                </label>
            </div>
            <div class="field">
                <label>
                    <input type="checkbox" name="occupation[]" value="Marketing" id="occupation" /> Marketing
                </label>
            </div>
            <div class="field">
                <label>
                    <input type="checkbox" name="occupation[]" value="Teacher" id="occupation" /> Teacher
                </label>
            </div>
        </div>
        <button type="button" name="button" id="fsubmit">Submit</button>
    </form>

通过添加表单和 

<button type="button" name="button" id="fsubmit">Submit</button>

然后使用按钮的 id #fsubmit到我们的 jQuery 中。

<script type="text/javascript">
    $(document).ready(function() {
    $("#fsubmit").click(function(e) {
        var val   = [];
        var id    = []; //defining to pass with AJAX
        var name  = []; //defining to pass with AJAX
        var val = [];
        $('input:checkbox:checked').each(function(i, v){
          id[i]   = $(this).attr('id');
          name[i] = $(this).attr('name');
          val[i]  = $(this).val();
        });
            var url = $('#myform').attr('action');
            $.ajax({
                url: url,
                type: "POST",
                dataType: 'json',
                data : {
                    'id': id,
                    'name': name,
                    'val': val
                },
                success: function(data) {
                    // $("#result").html(data);
                    console.log(data);
                }
            });
  });
});
</script>

请注意，我更改了一些变量，根据您的需要更改它，

var val   = [];
var id    = []; //defining to pass with AJAX
var name  = []; //defining to pass with AJAX
var val = [];

并添加了此

var url = $('#myform').attr('action');

而且，dataType: 'json' ，

jQuery做什么，当用户单击按钮时，从表单操作中获取链接并查找选中的值并将其发送到PHP。

这里是 PHP 的示例

<?php
if ( isset($_POST['id']) ) {
  $temp['id'] = $_POST['id'];
}
if ( isset($_POST['name']) ) {
  $temp['name'] = $_POST['name'];
}
if ( isset($_POST['val']) ) {
  $temp['val'] = $_POST['val'];
}
$data['data'] = $temp;
echo json_encode($data);

检查您的日志以获取结果，

希望这个帮助

相关文章：