Send checkbox values in Ajax

Question

The following code is my original code. In the code, I tried to post value of an input for each checkbox which is checked.

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

The code above is working fine. It post the value of each inputs for each checkbox which were checked. For example; if there were three checkedbox which were checked and the form was submited, then it would post three arrays (3 loop) of : $product_name,$product_size,etc..

What I want now is to use Ajax. Like this:

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

But it doesn't count or find the checkbox

So my question now is how to do the same as the php do with foreach($_POST['checkbox'] as $i) in ajax?

I am just a beginner in all of these things.

Thank you for any help.

@Ghost,thanks for the quick idea. Can you please show/teach me step by step how to do that? — Al Kasih
– Al Kasih, Commented Dec 23, 2014 at 8:55
you can also use jquery form plugin to send all info of a form trough ajax to the form action page — Marco Mura
– Marco Mura, Commented Dec 23, 2014 at 9:10
another possibility would be ` document.getElementsByTagName("checkbox")` if checkbox is a tagname — Heiko Becker
– Heiko Becker, Commented Dec 23, 2014 at 9:13
@klaudia try to use lolka's way below, load the serialized form values into data: in jquery. then in PHP call your POST values as you normally would do. if you want to make sure use print_r($_POST); so that you can debug and can expect what to process in POST. — Kevin
– Kevin, Commented Dec 23, 2014 at 10:57

vaso123 · Accepted Answer · 2014-12-23 09:16:46Z

1

You are using your product_name as a string, not as a variable:

Try this:

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

Or, as Ghost sad in comments, use formdata.

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

and later, in the ajax:

data: dataString,
...

answered Dec 23, 2014 at 9:16

vaso123

12.4k4 gold badges38 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Al Kasih Over a year ago

Actually I still have no idea how this form serialize will work. As you can see, what I send from the checkbox is the related input of it, not the value of the checkbox itself,means that if there are three checkbox (looping), then there would be three input for name="items['.$i.']" and name="size['.$i.']".

vaso123 Over a year ago

You can read about this form serialization here: api.jquery.com/serialize It's make a string like as you wish, but you can use the first solution of mine also.

Al Kasih Over a year ago

I have read that, and in the example it only send the value of the checkbox itself, not the input related to the checkbox.

vaso123 Over a year ago

document.getElementById('product_name').value; is do the same. Get the value of the checkbox. How do you mean, the "input related"? Anyway, this form serialize is sending all the data from your form.

Deenadhayalan Manoharan · Accepted Answer · 2014-12-23 09:32:20Z

0

Try this...

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

answered Dec 23, 2014 at 9:32

Deenadhayalan Manoharan

5,45214 gold badges33 silver badges50 bronze badges

2 Comments

Al Kasih Over a year ago

Can you explain it to me first what it is doing with this and what is the difference with what I have?

Deenadhayalan Manoharan Over a year ago

data: product_name='+product_name+'&product_size ='+product_size ,This code have error

I'm Geeker · Accepted Answer · 2014-12-23 09:43:57Z

0

Try this

Ajax is simplified check here

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

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

OR

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

answered Dec 23, 2014 at 9:43

I'm Geeker

4,6575 gold badges25 silver badges42 bronze badges

Collectives™ on Stack Overflow

Send checkbox values in Ajax

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related