POST array with jQuery and Ajax

Question

I have a form with multiple fields, whereby fields can be added.

The FORM is as follows:

<form id="myForm" action="myfile.php" >
<input . . > 
<select>. . . </select>
</form>

myfile.php has the following code:

foreach ($_POST as $key => $value) {
echo $key." takes the <b>".$value."</b> Value"; 
}

This simple code processes all the entries of the form regardless how many.

Now, what I want is:

When I click on the submit button, instead of sending the form's content to a script, to actually get that array and pass it AJAX without having to write every single key and its value manually.

I hope it makes sense

• Popnoodles: I think you missed this section out when you learned about ajax in jquery api.jquery.com/serialize
• Popnoodles: possible duplicate of jQuery Ajax POST example with PHP

Answer 1

I think what you are looking for is serialize()

jQuery(function ($) {
 //submit handler
 $('#myForm').submit(function (e) {
 //prevent default submit
 e.preventDefault();
 $.ajax({
 url: $(this).attr('action'),
 type: 'POST',
 data: $(this).serialize(),
 ....
 })
 });
})

• JanvierDesigns: I just got an answer from stackoverflow.com/questions/5004233/… Thanks
• Popnoodles: @JanvierDesigns Ok but I think unless you delete the question this answer should still be marked as the correct answer.

Answer 2

You can use jQuery serialize() method

$("#myForm").submit(function(e){ //To listen submit event
 e.preventDefault(); //To prevent default browser action
 var data=$(this).serialize(); // To get form data
 $.post($(this).attr('action'),data,function(data){ //To perform post
 $('#result').html(data); //Result data
 });
});