How to pass selected check-box value(s) from jQuery to PHP as an array?

Question

Question by Zoran

UPDATED CODE:

Now, I have this code:

<h2>Testing</h2>

<input type="checkbox"  name="fruit1" id="id1"  class="box">Banana<br /><br />
<input type="checkbox"  name="fruit2" id="id2"  class="box">Cherry<br /><br />
<input type="checkbox"  name="fruit3" id="id3"  class="box">Strawberry<br /><br />
<input type="checkbox"  name="fruit4" id="id4"  class="box">Orange<br /><br />
<input type="checkbox"  name="fruit5" id="id5"  class="box">Peach<br /><br />
<form id="myForm" action="2.php" method="post">
    <input type="submit" id="groupdelete" value="clickme"><br />
</form>     

<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script>

$('#groupdelete').on('click', function(){
var names = [];
$('input:checked').each(function() {
    names.push($(this).attr("id"));

});

$.post("2.php", { "names" : names }, function(data) {
    names = names.join(",");
    // do something on success
    alert(data); //if everything is working correctly should alert the var_dump here
});
});

</script>

On page 2.php I have this:

<?php
$names = explode(",",$_POST['names']);
var_dump($names);
?>

Which prints: array(1) { [0]=> string(0) “” }

What I am doing wrong???

Zoran

Answer 1

Answer by Starx

Starx

Send an ajax request to the server

names.push($(this).attr("id"));

$('#groupdelete').on('click', function(e){
    e.preventDefault(); //stop the default form action
    var names = [];
    $('input:checked').each(function() {
        names.push($(this).attr("id"));
    });

    $.post("page2.php", { "names" : names }, function(data) {
        // do something on success
        alert(data); //if everything is working correctly should alert whatever page2.php echos or prints
    });

});

Update 1

JS Array and PHP array are two different things and an easy way to overcome this is join

names = names.join(","); //Join all the array with a comma nd send

Later on the PHP Script, use explode() to get your array back

$names = explode(",",$_POST['names']);
var_dump($names);

Update 2

Make the following changes on your current code

names = names.join(",");
$.post("2.php", { "names" : names }, function(data) {
    alert(data); //if everything is working correctly should alert the var_dump here
});

Update 3

I have created a fiddle, with the proper way to do it. Check it and update your codes as per.

Update 4

Ok, finally starting the get the picture now. Check this update.

Basically, create a hidden element, whose value will be updated with the checked box’s id value and send it.

Update 5

If you want to stop a field from being submitted. You can assign disabled="disabled" to stop it from being submitted.

Here is an updated fiddle