How to send the values of an array of checkboxes through Ajax using jQuery?

Question

I have a form with a lot of form fields (12 x n rows). The first field in each row (which represents a product) is a checkbox that resembles this:

<input type="checkbox" class="ids" name="ids[]" value="1">

The value of each checkbox is unique.

What I am trying to do is send checked values to a PHP script for processing via Ajax. What I am am having issues with is getting the IDs to the server properly. I have tried using several things including:

$('.ids:checked').serialize();

and

var ids = [];
$('.ids:checked').each(function(i, e) {
    ids.push($(this).val());
});

$.ajax({
    url: "stub",
    type: "post",
    dataType: "json",
    data: {
        'ids[]': 'ids[]='+ids.join('&ids[]=')
    },
    success: function(data) {
        // stub
    }
});

But these both result in getting this on the server:

ids[]=104&ids;[]=105

I could serialize the whole form and send it over but that could result in a lot of data being sent that is going to be unused.

How do I send only the values of delete[] to the server? Ideally in a way that PHP recognizes it as an array?

(I have worked around it by sending the IDs over as a comma delimited string but would like to know how to accomplish this since I spent enough time trying to figure it out).

By chance, are the ids in any way associated with the ids in your database? — Paul Dessert
– Paul Dessert, Commented Sep 15, 2012 at 0:09

Kris · Accepted Answer · 2012-09-15 00:19:18Z

25

This worked fine for me

<input type="checkbox" class="ids" name="ids[]" value="2">
<input type="checkbox" class="ids" name="ids[]" value="3">
<input type="checkbox" class="ids" name="ids[]" value="4">
<input type="checkbox" class="ids" name="ids[]" value="5">
<input type="checkbox" class="ids" name="ids[]" value="6">

<div id="response"></div>
<button id="submit">Submit</button>

<script>

$('#submit').click(function() {

$.ajax({
    url: "stub.php",
    type: "post",
    data: $('.ids:checked').serialize(),
    success: function(data) {
    $('#response').html(data);
    }
});


});
</script>

Then on stub.php

var_dump($_POST);

edited Sep 15, 2012 at 0:19

answered Sep 15, 2012 at 0:11

Kris

6,1222 gold badges33 silver badges46 bronze badges

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

3 Comments

John Conde Over a year ago

Looks like I was close but not quite there. Thanks for your help.

buycanna.io Over a year ago

Wrap all your checkboxes within form tags, then serialize. <form id="myform"></form> ---- myform.serialize().

SamDasti Over a year ago

Is it works without Form, And without specifying type: "post", .

Sushanth -- · Accepted Answer · 2012-09-15 00:43:20Z

3

Why don't you send the id's as comma separated string. You can split it on server side and apply the logic associated with it..

var ids = [];
$('.ids:checked').each(function(i, e) {
    ids.push($(this).val());
});

$.ajax({
    url: "stub",
    type: "post",
    dataType: "json",
    data: {
        'ids[]': ids.join()
    },
    success: function(data) {
        // stub
    }
});

answered Sep 15, 2012 at 0:43

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

1 Comment

John Conde Over a year ago

If you read the bottom of my question you'll see that's what I did to work around this.

sandeep autade · Accepted Answer · 2019-02-17 03:54:41Z

2

Solution for me working fine

//get checkbox checked data as the array

var ids = new Array();
      $('input[name="ids[]"]:checked').each(function(){
         ids.push($(this).val());
      });



var dataString = 'ids='+ ids;


 $.ajax({
            type: "POST",
            url: "ajax_fees_pay_Directly.php",
            data: dataString,
            cache: false,
            success: function(data){

}
 });

answered Feb 17, 2019 at 3:54

sandeep autade

4218 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to send the values of an array of checkboxes through Ajax using jQuery?

3 Answers 3

3 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Linked

Related