Advanced use of jQuery serializeArray()

Question

I'm currently submitting a form via ajax and pass in a manually created data variable that looks a bit like this:

var data = 'answer1='
    + $("input[name=question_1]:checked").val()
    + '&q1_option=' + $("input[name=question_1]:checked").attr("id")

This continues throughout the list of form elements obviously increasing incrementally question_2, question_3 etc. The problem is that this is a bit messy. I'd like to use jQuery serializeArray but, to do this I would need to pass in an extra parameter. I need to pass the input value and the input id as this id is used in the data.

Is there a way I can achieve this using jQuery serializeArray()?

Example form markup:

<label>What is your gender?<span class="required"> *</span></label>
<input id="1" type="radio" name="question_1" value="Male"><label class="standard" for="1">Male</label><br>
<input id="2" type="radio" name="question_1" value="Female"><label class="standard" for="2">Female</label><br>
<label>How old are you?<span class="required"> *</span></label>
<input id="3" type="radio" name="question_2" value="Under 25"><label class="standard" for="3">Under 25</label<br>
<input id="4" type="radio" name="question_2" value="25-29"><label class="standard" for="4">25-29</label><br>
<input id="5" type="radio" name="question_2" value="30-39"><label class="standard" for="5">30-39</label><br>
<input id="6" type="radio" name="question_2" value="40-49"><label class="standard" for="6">40-49</label><br> 
<input id="7" type="radio" name="question_2" value="50-59"><label class="standard" for="7">50-59</label><br>
<input id="8" type="radio" name="question_2" value="60+"><label class="standard" for="8">60+</label><br>

Why can't you just call `.serialize()` on the `
` element itself? That builds the query string for you from all the enabled inputs (and selects and textareas) in the `
`. — Pointy, Sep 24 '12 at 13:42
See [this](http://stackoverflow.com/questions/4862189/posting-jquery-serializearray-output-through-ajax) question on SO — Viktor S., Sep 24 '12 at 13:43
Pointy has got the right answer - nice and simple using .serialize() — Adam Jenkins, Sep 24 '12 at 13:47
Well if I do serialize on the form it won't pass back both the id and the value? Only the value — Cliftwalker, Sep 24 '12 at 13:49
@Cliftwalker: the point here is that if you want `8` rather than `60+` then `8` should be your value. The label will still say `60+` so use `value` for the internal representation you want, and then use the label for presentation. — David Hedlund, Sep 24 '12 at 13:53

score 1 · Accepted Answer · answered Sep 24 '12 at 13:44

First of all, let me point out that this looks like a misuse of forms. If the name of the form element would be "answer1" instead of "question_1", and if your options would be named "q1_option" rather than "question_1", and if you accessed their values rather than their ids, you would be able to serialize the form in a simple one-liner, and, essentially, this is the meaning that name and value are intended to convey.

Having said that, $.serializeArray yields an array of key/value pairs. It's hard to see what you would want $.serializeArray to do in your specific scenario. If you want such an array, you could construct it yourself:

var keyValuePairs = [];

keyValuePairs.push({ name: 'answer1', value: $('input[name=question_1]:checked').val() })

var options = $('input[name^="question_"]:checked');    
for(var i = 0; l = options.length; i < l; i++) {
   keyValuePairs.push({ 
      name: 'q' + i + '_option', 
      value: options.get(i).attr('id')
   });
}

Given such an array, you could serialize it to a string like the one in your example, using

var data = $.param(keyValuePairs);

Advanced use of jQuery serializeArray()

1 Answers1