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

Question

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

You could change it into an array using php via the php.net/manual/en/function.explode.php explode function. — Infra Stank
– Infra Stank, Commented Mar 14, 2012 at 7:55
id attribute value that starts with a number is invalid! — gdoron
– gdoron, Commented Mar 14, 2012 at 7:57
I get no erros. I get string(3)"2,3" if I select checkboxes 2 and 3. I need the value to be passed as an array. Yes frank, I know to do that, but is something that I am trying to avoid, since it should be possible to pass the value as an array. — Zoran
– Zoran, Commented Mar 14, 2012 at 8:03
-gdoron, yes I know, but changing the id to start with the letter, will not do the trick. — Zoran
– Zoran, Commented Mar 14, 2012 at 8:04
no error Gaurav...I get coma separated string, and I need an array — Zoran
– Zoran, Commented Mar 14, 2012 at 8:10

Salman Arshad · Accepted Answer · 2012-03-14 08:18:14Z

2

I would do something like this:

HTML form

<form id="myForm" action="test.php" method="post">
    <input type="checkbox" name="fruit[]" value="1">Banana<br /><br />
    <input type="checkbox" name="fruit[]" value="2">Cherry<br /><br />
    <input type="checkbox" name="fruit[]" value="3">Strawberry<br /><br />
    <input type="checkbox" name="fruit[]" value="4">Orange<br /><br />
    <input type="checkbox" name="fruit[]" value="5">Peach<br /><br />
    <input type="submit" id="groupdelete" value="clickme"><br />
</form>

jQuery code

$(document).ready(function() {
    $("#myForm").submit(function(event) {
        event.preventDefault();
        alert("Will post: " + $(this).serialize());
        $.post($(this).attr("action"), $(this).serialize(), function(response) {
            alert(response);
        });
    });
});

PHP code

var_dump($_POST);

Output

Assuming the first two check-boxes were checked:

array(1) {
  ["fruit"]=>
  array(2) {
    [0]=>
    string(1) "1"
    [1]=>
    string(1) "2"
  }
}

edited Mar 14, 2012 at 8:18

answered Mar 14, 2012 at 8:11

Salman Arshad

274k85 gold badges450 silver badges540 bronze badges

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

1 Comment

Salman Arshad Over a year ago

It always gives me an array with values of checked elements. Note that I've dropped the id attribute and added value attribute to each check-box (look at the html form closely).

Starx · Accepted Answer · 2012-03-14 10:49:18Z

0

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

edited Mar 14, 2012 at 10:49

answered Mar 14, 2012 at 7:54

Starx

79.3k50 gold badges187 silver badges266 bronze badges

14 Comments

Zoran Over a year ago

Hi Starx my page 2.php prints null. any idea why?

Starx Over a year ago

@user1004754, I am not sure if you used my code properly, check my update and as per that.

Starx Over a year ago

@user1004754, Please use proper name instead of the codename generated by this site.

Zoran Over a year ago

Hi Starx. Your code works only if i remove <form action=2.php method post> and </form> tags. How can I redirect the user without the form action? Sorry about my name, but I can't find where to change it.

Starx Over a year ago

@user1004754, groupdelete is a submit button, on it will trigger the submit event of the form. use event.preventDefault() on the code to stop the submition

|

Collectives™ on Stack Overflow

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

2 Answers 2

HTML form

jQuery code

PHP code

Output

1 Comment

Update 1

Update 2

Update 3

Update 4

Update 5

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

HTML form

jQuery code

PHP code

Output

1 Comment

Update 1

Update 2

Update 3

Update 4

Update 5

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related