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

I think you missed this section out when you learned about ajax in jquery api.jquery.com/serialize — Popnoodles
– Popnoodles, Commented Mar 10, 2014 at 1:02

Arun P Johny · Accepted Answer · 2014-03-10 01:02:22Z

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(),
            ....
        })
    });
})

answered Mar 10, 2014 at 1:02

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

2 Comments

JanvierDesigns Over a year ago

I just got an answer from stackoverflow.com/questions/5004233/… Thanks

Popnoodles Over a year ago

@JanvierDesigns Ok but I think unless you delete the question this answer should still be marked as the correct answer.

Pranav C Balan · Accepted Answer · 2014-03-10 01:09:20Z

0

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
    });
});

edited Mar 10, 2014 at 1:09

answered Mar 10, 2014 at 1:04

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

Collectives™ on Stack Overflow

POST array with jQuery and Ajax

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related