在Ajax中发送复选框值

时间:2014-12-23 08:46:51

标签: javascript php jquery ajax checkbox

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

      <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中使用php foreach($_POST['checkbox'] as $i)做同样的事情?

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

感谢您的帮助。

3 个答案:

答案 0 :(得分:1)

您使用product_name作为字符串,而不是变量:

试试这个:

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

或者,正如Ghost在评论中感到悲伤,请使用formdata。

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

以后,在ajax中:

data: dataString,
...

答案 1 :(得分:0)

试试这个......

 <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>

答案 2 :(得分:0)

试试这个

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 );
  });