How To Pass Array With All Elements With Jquery To Php

I am trying to pass an array from jQuery to PHP. Name1

Solution 1:

This works and is perhaps simpler than using FormData. (Note that I've changed name[] to name and phone[] to phone.) I've also moved the AJAX call outside of the each loop.

HTML:

<inputtype="checkbox"id="name1" name="name" value="name1"> Name1
<inputtype="checkbox"id="name2" name="name" value="name2"> Name2
<inputtype="checkbox"id="name3" name="name" value="name3"> Name3<br />

<inputtype="checkbox"id="phone1" name="phone" value="samsung"> Samsung
<inputtype="checkbox"id="phone2" name="phone" value="nokia"> Nokia
<inputtype="checkbox"id="phone3" name="phone" value="motorola"> Motorola<br />

JavaScript:

$(document).ready(function() {
    $(":checkbox").on('change', function() {
        var mygroup = {};

        $(':checkbox:checked').each(function(i) {
            var val = this.value;
            var name = this.name;

            mygroup[name] = (mygroup[name] || []).concat([val]);
        });

        $.ajax({ 
            type: "POST", 
            url: 'testdraft1.php',
            data: mygroup,
            success: function(data) {
                $("#result").html(data);
            }
        });
    });
});

EDIT

This line is a bit confusing:

mygroup[name] = (mygroup[name] || []).concat([val]);

Here's a simpler version of it:

// initialize with an empty array if neededif (mygroup[name] === undefined) {
    mygroup[name] = [];
}
// append the most recent value to the array
mygroup[name].push(val);

Solution 2:

You are calling the ajax post inside the each loop, which means if you check five boxes you will send a separate post for every iteration of the each call.

That means the first post will have just one checkbox, the second post will have two, etc.

Unless you really want to do that, then you need to close your each loop before your ajax call.

That doesn't solve the name problem, but it will solve the reason you only get one checkbox sent to php.

Solution 3:

There are multiple of problems with your code,

1. AJAX code should be outside .each function.
2. Define array outside change event.
3. You can't send array direct like this in AJAX request. Use FormData for that.

So change your code like this,

$(document).ready(function() {
        var group = []; //DEFINED THE ARRAY
        $(":checkbox").on('change', function() {
            $(':checkbox:checked').each(function(i) {
                var val = this.value;
                var name = this.name;
            var dataObject = {};
            dataObject.name = name;
            dataObject.val = val;

            group.push(dataObject);

        });
        var fd = newFormData();
        for (var i = 0; i < group.length; i++) {
            fd.append(group[i].name, group[i].val);
        }
        $.ajax({
            type: "POST",
            url: 'testdraft1.php',
            data: fd,
            success: function(data) {
                $("#result").html(data);
            }
        });
    });
});

Solution 4:

<input type="checkbox" id="name1" name="name[]" value="name1"> Name1
<input type="checkbox" id="name2" name="name[]" value="name2"> Name2
<input type="checkbox" id="name3" name="name[]" value="name3"> Name3

<br />

<input type="checkbox" id="phone1" name="phone[]" value="samsung"> Samsung
<input type="checkbox" id="phone2" name="phone[]" value="nokia"> Nokia
<input type="checkbox" id="phone3" name="phone[]" value="motorola"> Motorola

<br />


$(document).ready(function() {
    $(":checkbox").on('change', function() {

    var group=[];   //DEFINED THE ARRAYvar mygroup = {};  // DEFINED THE OBJECT

        $(':checkbox:checked').each(function(i){    

        varval= this.value;
        var id = this.id;   

        mygroup[id]=val;  //PUSH VALUES TO THE OBJECT mygroupvar all = id+"="+val;

        group.push(all); // PUSH ALL CHECKBOX VALUES TO ARRAY

    $.ajax({ 
        type: "POST", 
        url: 'testdraft1.php',
        data : mygroup,             //TRIED WITH group and all also. Doesn't work.
        success: function(data){
        $("#result").html(data);
    }
   });  

    });
    });

});

Use same Name but rather changing the name you change the id name it will works for you

Share