How to pass HTML form array with jquery .post

Question

Need help with examples using $.post()

Simplified form with a multi-dimensional array:

<form action="save-objectives.php" name="save-objectives-form" id="save-objectives-form">
 <input type="text" name="objective[0][subject]" value="" />
 <input type="text" name="objective[0][detail]" value="" />
 <input type="submit" value="Save" />
</form>

The name of this array is "objective" (it's dynamically generated so the "objective" array might have many elements). I want to pass this entire array to a PHP page that I call using jquery's .post() method.

I can call the .post method with single values on other forms. I need to pass the entire array, so I want to be able to access that array on the called page like so objectives[0][subject] or objectives[39][detail] and get the value.

Here is how I'm trying to use post

$(document).on('submit', "#save-objectives-form", function(event){
     event.preventDefault();

     var p = $.post("save-objectives.php",  objective:objective);

     p.done(function(data) { ... do other stuff ... } ); 
}); /*end ajax call*/

So the line starting with "var p =" what is the syntax to send the array to the next page via post? I want to be able to loop through the form array on the save-objectives.php page as if it were a regular post array in HTML.

what I'm trying is not working. I have no idea what JSON is, and quite frankly think it might be overkill for what I'm trying to do so it would be best to not use that. Thank you for taking a look.

Answer 1

Just serialize the form ?

$(document).on('submit', "#save-objectives-form", function(event){
     event.preventDefault();
     $.post("save-objectives.php",  $(this).serialize()).done(function(data) {
          ... do other stuff ... 
     }); 
});