1

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?

3
  • Do you have the code of generated HTML? Let us know the output of var_dump($_POST). Commented Apr 4, 2013 at 4:21
  • This is the var_dump from 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()? Commented Apr 4, 2013 at 4:31
  • Please update it in your question. Commented Apr 4, 2013 at 4:40

2 Answers 2

3
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

Sign up to request clarification or add additional context in comments.

Comments

0

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.