jQuery POST multidimensional form array

Question

I have a form that collects the data from all it's inputs as a multidimensional array, and using the standard form submit function, this loads the target page and the PHP script reads the multidimensional array perfectly and results in the desired output.

<form action="target.php" method="post">

<?php foreach ($days as $day) { ?>

    <select name="roster[<?php echo $day->date() ?>][1]"> ... </select>
    <select name="roster[<?php echo $day->date() ?>][2]"> ... </select>
    <select name="roster[<?php echo $day->date() ?>][3]"> ... </select>

<?php } ?>

<input type="submit">
</form>

In the target PHP file, I just pick this up on $_REQUEST['roster'], then I can just work with it as a normal PHP array. Simple as can be.

However, I would like to convert this to an AJAX request using jQuery. I have read a few suggestions that say to pick up the form data using $('form').serialize() or $('form').serializeArray(), but this does not read the array correctly, and produces some strange output.

I am currently playing around with other suggestions which essentially involve traversing the DOM and constructing a new javascript array or object from the element data, then sending this via $.ajax(), but it all seems needlessly complex.

My question is: Is there a simple way of sending this form array data through jQuery and $.ajax()?

In all likelihood there is, and it will be bleeding obvious, but at the moment I can't see it!

EDIT:

Here is a print_r output of $_REQUEST['roster'] from the standard form submit function: (prettied up with <pre> formatting for readability):

Array
(
[2013-04-06] => Array
    (
        [1] => 8
        [2] => 3
        [3] => 7
    )

[2013-04-13] => Array
    (
        [1] => 4
        [2] => 3
        [3] => 7
    )

[2013-04-20] => Array
    (
        [1] => 8
        [2] => 17
        [3] => 7
    )

[2013-04-27] => Array
    (
        [1] => 4
        [2] => 3
        [3] => 7
    )

)

And here is the output for $('form').serialize():

roster%5B2013-04-06%5D%5B1%5D=8&roster%5B2013-04-06%5D%5B2%5D=3&roster%5B2013-04-06%5D%5B3%5D=7&roster%5B2013-04-13%5D%5B1%5D=0&roster%5B2013-04-13%5D%5B2%5D=0&roster%5B2013-04-13%5D%5B3%5D=0&roster%5B2013-04-20%5D%5B1%5D=0&roster%5B2013-04-20%5D%5B2%5D=0&roster%5B2013-04-20%5D%5B3%5D=0&roster%5B2013-04-27%5D%5B1%5D=0&roster%5B2013-04-27%5D%5B2%5D=0&roster%5B2013-04-27%5D%5B3%5D=0

And the output for $('form').serializeArray():

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Which if I then extract the data from each [object Object] using

$.each(data, function(index1, value1) {
    $.each(value1, function(index2, value2) {
        $('body').append('index1: '+index1+' value1: '+value1+' { index2: '+index2+' value2: '+value2+' }');
    });
});

I get:

index1: 0 value1: [object Object] { index2: name  value2: roster[2013-04-06][1] }
index1: 0 value1: [object Object] { index2: value value2: 8 }
index1: 1 value1: [object Object] { index2: name  value2: roster[2013-04-06][2] }
index1: 1 value1: [object Object] { index2: value value2: 3 }

...etc... for each input.

Obviously, from the $.each output, I should be able to access the data as object.name and object.value, then format everything into a new array to make it work with my PHP script, but is this the way to do it? or is there a better way?

Answer 1

More simpler would be to use jQuerys $.param() function. http://api.jquery.com/jquery.param/

Answer 2

The .serialize() method creates a text string in standard URL-encoded notation.

That means that it will replace the [ and ] with %5B and %5D. Since it's a text string, a method would be to replace them back.

Example

var ser = $('#id').serialize();

ser = ser.replace(/%5B/g,"[");
ser = ser.replace(/%5D/g,"]");

JS Fiddle