CODEWITHSUNDEEP
javascriptjqueryhtmlajaxforms
Cliftwalker
Cliftwalker

Reputation: 369

Advanced use of jQuery serializeArray()

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>

Upvotes: 0

Views: 1056

Answers (1)

David Hedlund
David Hedlund

Reputation: 129812

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

Upvotes: 1

Related Questions