jQuery submit ajax with multiple arrays

Question

Hi I'm trying to submit a form using ajax inside Validate's submitHandler, also using the Chosen library which beautifies multiple selects. The following works:

submitHandler: function(form) {
    var     form = $(this.currentForm);

    var     data = {
        first_name    : form.find('#first_name').attr('value'),
        last_name     : form.find('#last_name').attr('value'),
        chosen_people : form.find('#chosen_people').val(),
    };

    $.ajax({
        type : "POST",
        url : "formhandler.php",
        data : data,
        success : function(response) {
            console.log(response);
        }
    });
}

Server response:

array(
    ['first_name'] => 'John'
    ['last_name'] => 'Smith'
    ['chosen_people'] => array(
        [0] => 37
        [1] => 42
    )
)

The problem is that my form is large and changes often and I don't want to have to keep enumerating all of the input and select elements. I want to just say something like:

var     inputs = form.find('input').serializeArray();
var     selects = form.find('.chzn-select').val();
var     data = $.merge(inputs, selects );

...

I've tried every combination of manually typing things like:

for(var select in selects)
    selects[select] = {'name' : select, 'value' : selects[select]};

var     serializedSelects = {'name' : 'chosen_people', 'value' : selects };
var     data = $.merge(inputs, serializedSelects);

But I just can't get the arrays to nest properly so that the server has the correct array structure in its post variables.

The gist of the problem is that although jQuery provides $.serializeArray() for elements, it doesn't provide something like $.paramArray() to take an associative array and convert it to a serialized array. It can only output serialized strings, which are difficult to manipulate further. I don't want to include another ajax framework, so am hopeful there is a straightforward solution.

P.S. I'm using php5 and jQuery 1.8.3. Here's what I've found so far, perhaps I'm just messing up the formatting of the selects array before I try to add it:

jQuery post() with serialize and extra data

How to serialize a JavaScript associative array?

Jquery.SerializeArray how to add more parameters to it?

Thanks!

Are you trying to get the values for all the elements in the form, or just some? — Musa, Jan 10 '13 at 20:30

score 2 · Accepted Answer · answered Jan 10 '13 at 20:45

2

what you need is to serialize your main form itself:

$('form').submit(function() {
  var data = $(this).serialize();
  e.preventDefault();
$.ajax({
    type : "POST",
    url : "formhandler.php",
    data : data,
    success : function(response) {
        console.log(response);
    }
});
});

answered Jan 10 '13 at 20:45

mamdouh alramadan

8,349
6
36
53

Hey thanks for your quick reply. Unfortunately it didn't work, here is the output: array( ['first_name'] => 'John' ['last_name'] => 'Smith' ['chosen_people'] => 4 ) for some reason, it didn't serialize the Chosen multiselect recursively. – Zack Morris Jan 10 '13 at 21:31
Combining your answer with this one worked for me http://stackoverflow.com/a/1186309/539149 and I think the jQuery folks need to consider updating their outdated serialization functions to work with real-world mixes of objects, associative arrays, numerical arrays, and possibly even serialized arrays if they can find an elegant way of recognizing them. – Zack Morris Jan 10 '13 at 21:47
yes, you're right. but I didn't know that you have multiselect :) – mamdouh alramadan Jan 10 '13 at 21:54

Zack Morris · Answer 2 · 2013-01-11T00:17:58.993

I'm not sure why this was so excruciating for me, but I finally found out how to format the arrays for ajax. The way that arrays are urlencoded threw me.. I'm not sure that deep nesting is really supported universally. Here are the various versions of array data that ajax can take:

var     associativeData = {'first_name' : 'John', 'last_name' : 'Smith', 'chosen_people' : Array('37', '42')};
var     nameValueData = Array(
    {'name' : 'first_name', 'value' : 'John'},
    {'name' : 'last_name', 'value' : 'Smith'},
    {'name' : 'chosen_people[0]', 'value' : 37},
    {'name' : 'chosen_people[1]', 'value' : 42}
);
var     serializedData = "first_name=John&last_name=Smith&chosen_people[]=37&chosen_people[]=42"

And here is what worked for me to append my own arrays. The if(values) line is optional but without it, the else case never fires so you don't get the chosen_people var at all on the server if nothing is selected:

var     data = form.find('input').serializeArray();
var     values = form.find('#chosen_people').val();
if(values)
for(var value in values)
    data.push({'name' : 'chosen_people[' + value + ']', 'value' : values[value]});
else
    data.push({'name' : 'chosen_people[]', 'value' : ''});

Just posting this answer in the hopes it helps someone.

jQuery submit ajax with multiple arrays

2 Answers2