Question

If I have an HTML form, let’s say…

<form id='myform'>
    <input type='hidden' name='x' value='y'>
    <input type='text' name='something' value='Type something in here.'>
    <input type='submit' value='Submit'>
</form>

… and then I use jQuery to respond to the form submission event, e.g.

$('#myform').submit(function() {
    ...
    return false;
});

Now suppose I want to submit the form as an AJAX call instead of actually submitting it the “traditional” way (as a new page). Is there an easy way to get a JS object containing the data that would be sent, which I can pass into $.post()? So in the above example it would look something like…

{
    x: 'y',
    something: 'Type something in here.'
}

or do I have to bake my own?

Answer 1

See the serialize() method.

$('#myform').submit(function() {
    jQuery.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function () {
           //
        }
    });

    return false;
});