在 Ajax 中发送复选框值答案

【问题标题】：Send checkbox values in Ajax在 Ajax 中发送复选框值
【发布时间】：2014-12-23 17:43:57
【问题描述】：

以下代码是我的原始代码。在代码中，我尝试为每个选中的复选框发布输入值。

      <tbody class="myFormSaldo">
          <tr>
            <td> <input name="checkbox['.$i.']" type="checkbox" value="'.$i.'" id="chb'.$ref.'" onchange="enableList(this);" class="chb_group" /> </td>

            <td> <input name="items['.$i.']" type="text" readonly value="'.$obj->items.'" /> </td>

            <td> <input name="size['.$i.']" type="text" readonly value="'.$obj->size.'Kg" /> </td>

            <td> <input name="quantity['.$i.']"  type="text" readonly value="'.$obj->myquantity.'" /> </td>



        if($_SERVER["REQUEST_METHOD"] == "POST") {
            foreach($_POST['checkbox'] as $i) {

                            $product_name=$_POST['items'][$i];
                            $product_size=$_POST['size'][$i];

上面的代码运行良好。它为每个选中的复选框发布每个输入的值。例如;如果选中了三个复选框并提交了表单，那么它将发布三个数组（3 个循环）：$product_name、$product_size 等。

我现在想要的是使用 Ajax。像这样：

    var product_name= document.getElementById('product_name').value;
    var product_size = document.getElementById('product_size').value;
    $.ajax(
    {
        type: "POST",
        url: "../actions/selectReferenceOrder.php",
        data: product_name='+product_name+'&product_size ='+product_size ,
        cache: false,
        success:function(html)
        {
            document.getElementById('outputReference').innerHTML = html;
        }
    });

但它不计数或找不到复选框

所以我现在的问题是如何在 ajax 中使用 foreach($_POST['checkbox'] as $i) 做与 php 相同的操作？

我只是所有这些事情的初学者。

感谢您的帮助。

【问题讨论】：

尝试使用$('#form_id').serialize()。
@Ghost，感谢您的快速想法。您能否逐步展示/教我如何做到这一点？
你也可以使用jquery表单插件将表单槽的所有信息通过ajax发送到表单操作页面
如果复选框是标记名，另一种可能性是`document.getElementsByTagName("checkbox")`
@klaudia 尝试使用以下lolka的方式，将序列化的表单值加载到jquery中的data:。然后在 PHP 中像往常一样调用您的 POST 值。如果您想确保使用print_r($_POST);，以便您可以调试并可以预期在 POST 中处理什么。

标签： javascript php jquery ajax checkbox

【解决方案1】：

您将product_name 用作字符串，而不是变量：

试试这个：

data: 'product_name='+product_name+'&product_size='+product_size,

或者，就像 cmets 中的 Ghost 一样，使用 formdata。

var dataString = $('form').serialize();

之后，在 ajax 中：

data: dataString,
...

【讨论】：

其实我仍然不知道这个表单序列化是如何工作的。如您所见，我从复选框发送的是它的相关输入，而不是复选框本身的值，这意味着如果有三个复选框（循环），那么name="items['.$i.']" 和@987654327 将有三个输入@.
您可以在此处阅读有关此表单序列化的信息：api.jquery.com/serialize 它可以按照您的意愿制作一个字符串，但您也可以使用我的第一个解决方案。
我已经读过，在示例中它只发送复选框本身的值，而不是与复选框相关的输入。
document.getElementById('product_name').value; 也是如此。获取复选框的值。你是什么意思，“输入相关”？无论如何，这个表单序列化正在发送所有表单中的数据。

【解决方案2】：

试试这个...

 <script>
$.ajax({
        type: "POST",
        url: "../actions/selectReferenceOrder.php",        
        data: "{'product_name':" + product_name + ", 'product_size':" + product_size+ "}",
        cache: false,
        dataType: "html"
        success:function(html)
        {
            document.getElementById('outputReference').innerHTML = html;
        }
    });
</script>

【讨论】：

你能先给我解释一下它是做什么用的，和我有什么区别？
data: product_name='+product_name+'&product_size ='+product_size ,这段代码有错误

【解决方案3】：

试试这个

Ajax 被简化check here

var data = $('form').serialize();

 $.post( "../actions/selectReferenceOrder.php", { name: data}).done(function( data ) {
        alert( "Data Loaded: " + data );
      });

或

$.post( "../actions/selectReferenceOrder.php", { product_name: product_name, product_size : product_size  }).done(function( data ) {
    alert( "Data Loaded: " + data );
  });

【讨论】：