post checkbox data using jquery

Question

i have some html snip like this

<input type="checkbox" name="color" value="red"/>red
<input type="checkbox" name="color" value="green"/>green
<input type="checkbox" name="color" value="purple"/>purple
<input type="checkbox" name="color" value="grey"/>grey

and i want to use jquery to post value to server, so i used jquery like this

$.post('/test', {'color': ['red', 'green']});

i did search this question in stackoverflow, but people say it's should be 'color[]' instead of 'color', but whenever i used 'color' or 'color[]' firebug displayed the post data is 'color%5B%5D=red&color%5B%5D=green', and my server can't work right, but when using

<input type="submit" value="submit"/>

to post firebug says the data is 'color=red&color=green', and my server work right. How could it be? my jquery version is 1.4.4

have you tried with jQuery.ajax() ..?

Chandresh M
– Chandresh M

2011-08-02 12:52:33 +00:00
Commented Aug 2, 2011 at 12:52 — Chandresh M
– Chandresh M, Commented Aug 2, 2011 at 12:52

ipr101 · Accepted Answer · 2011-08-02 12:58:06Z

2

I believe that when you call -

$.post('/test', {'color': ['red', 'green']});

an array is being passed as the post data and the flattening of the array is what's causing the 'color%5B%5D=red&color%5B%5D=green' result.

If you use the following -

$('input:checkbox[name="color"][checked=true]').serialize()

This should return all of the checked checkboxes in the 'color=red&color=green' format. There's a jsfiddle that attempts to illustrate the concept here - http://jsfiddle.net/789nP/.

answered Aug 2, 2011 at 12:58

ipr101

24.2k8 gold badges61 silver badges62 bronze badges

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

Comments

Quentin · Accepted Answer · 2011-08-02 13:03:25Z

1

For some reason, the jQuery developers decided that PHP's bizarre handling of multiple controls with the same name is The Correct Way. As a consequence, when submitting an array of data, jQuery will append [] to the name (%5B%5D is just a URL encoded representation of []).

to post firebug says the data is 'color=red&color=green', and my server work right

That suggests that you are using something other than PHP to process the data so PHP's magic handling of [] in names does not apply.

You can either look for color[] on the server…

e.g.

@values = $query->param('color[]');

… or you can set traditional mode to stop jQuery PHPifying your data.

$.post('/test', {'color': ['red', 'green']}, { traditional: true });

Then normal access should work:

@values = $query->param('color');

answered Aug 2, 2011 at 13:03

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

2 Comments

ipr101 Over a year ago

Thanks for that answer, I'd never really understood why jQuery was flattening the array in the way that it does. It all makes sense now!

xudifsd Over a year ago

Ok, that's right, and i used php to test again, it really works! BTW, I'm using web.py as my server...maybe i should learned some php right now, LOL

Collectives™ on Stack Overflow

post checkbox data using jquery

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related