jQuery serializeArray: keep values of checkboxes/radio with same name

[WolfShade]

Hello, all,

I'm using $.serializeArray() to condense all the fields of a form into an array, JSON.stringify()-ing it and submitting that via AJaX.  Works GREAT, as long as there are not any checkboxes that have the same name.  Because an associative array cannot have duplicate keys, the last checked checkbox value is the only one being sent.  Any ideas on how to get _all_ checked values to be sent?  ie:

<input type="checkbox" id="unique_1" name="airliner-0" value="FOO" />
<input type="checkbox" id="unique_2" name="airliner-0" value="BAR" />
<input type="checkbox" id="unique_3" name="airliner-0" value="PHU" />
<input type="checkbox" id="unique_4" name="airliner-0" value="VAR" />

If the second and fourth checkboxes are checked, serializeArray() will first set key 'airliner-0' to 'BAR', then set it to 'VAR'.  How can I get both values sent?

V/r,

^ _ ^

[B i r n o u]

instead of using

name="airliner-0"

did you try

name="airliner-0[]"

and on the PHP side think to implode it...

[WolfShade]

Hello, Birnou,

I'm using ColdFusion, not PHP (not sure if that makes a difference, or not).  But the issue is on the client-side, not server-side.  The browser (JavaScript/jQuery) is converting the form elements into an associative array, which does not allow duplicate keys.  By setting the name to an implicit creation of an array..  waitaminnit, let my brain wrap around this for a moment..

It's too early in the morning and I haven't had enough caffeine, yet.    I'll give that a shot and see if it works.  Thank you.

V/r,

^ _ ^

[B i r n o u]

the name attribute is in client side...

so on server side, as you use coldfusion you will have to use the alternative from implode (php) into arraytolist (cf -arrayToList Code Examples and CFML Documentation ) or listoarray(cf - listToArray Code Examples and CFML Documentation ) depending on your needs and way of deal from there

[WolfShade]

Birnou,

Unfortunately, this did not change anything.  Because the checkboxes become an array before being processed by $.serializeArray(), it, too, is being turned into an associative array, therefore duplicates are not allowed, so only the last checked value is set before being sent.  Also, even if it did work, research I've done indicates that if only one checkbox is checked, then the value posted is not an array but a string, so I'd have to check server-side if the data is array or string before processing it (no big deal, really, just another step in the process.) 

V/r,

^ _ ^

CORRECTION:  It is not being sent as an associative array, at least not from the alert() that I generate before post.  But something on the server-side is converting it into the associative array, removing the duplicate key names.  I'll look further into this and report back what I find.  Again, thank you for your suggestion.  This might work, after all.  Just need to look at it from a different angle. 

[B i r n o u]

I never encounter any trouble using it that way...  and I had the following code linked to my evernote personnal documentation

perhaps that could help, I never use it... and I must have collect it reading a book sometimes, somewhere

var form_datas = {}; var the_form = $('#selector).serializeArray(); for (var i = 0; i < the_form.length; i++) {     if (the_form['name'].endsWith('[]')) {         var name = the_form['name'];         name = name.substring(0, name.length - 2);         if (!(name in form_datas)) {             form_datas[name] = [];         }         form_datas[name].push(the_form['value']);     } else {         form_datas[the_form['name']] = the_form['value'];     } }  $.post('/endpoint', form_datas, function(response) { }, 'json');

[WolfShade · Accepted solution]

I have looked all over, and haven't found anything that will do what I am trying to do, so I've decided to (sadly, again) go a hack-ish route, as I've already spent way too much time on this.

I am going to provide a hidden field and set up JavaScript so that every check or uncheck of a checkbox will take all checked values and place them, list style, inside that hidden field, and then process that field on the server-side instead of trying to keep the checkbox values.  (I've tested it, and it works.)

V/r,

^ _ ^