Skip to main content
WolfShade
WolfShade
Legend
January 9, 2018
Answered

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

  • January 9, 2018
  • 1 reply
  • 9908 views

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,

^ _ ^

    This topic has been closed for replies.
    Correct answer WolfShade

    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');

    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,

    ^ _ ^

    1 reply

    B i r n o u
    Community Expert
    B i r n o uCommunity Expert
    Community Expert
    January 10, 2018

    instead of using

    name="airliner-0"

    did you try

    name="airliner-0[]"

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

    WolfShade
    WolfShadeAuthor
    Legend
    January 10, 2018

    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
    Community Expert
    B i r n o uCommunity Expert
    Community Expert
    January 10, 2018

    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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices