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?
var_dump($_POST).var_dumpfrom the standard submit function that works: array(1) { ["roster"]=> array(4) { ["2013-04-06"]=> array(3) { [1]=> string(1) "8" [2]=> string(1) "3" [3]=> string(1) "7" } ["2013-04-13"]=> array(3) { [1]=> string(1) "0" [2]=> string(1) "0" [3]=> string(1) "0" } ["2013-04-20"]=> array(3) { [1]=> string(1) "0" [2]=> string(1) "0" [3]=> string(1) "0" } ["2013-04-27"]=> array(3) { [1]=> string(1) "0" [2]=> string(1) "0" [3]=> string(1) "0" } } } ... or did you want to see the output of.serializeArray()?