jQuery intercept form submission to param string

Question

I have a form. This form submits via POST to an iframe, that, in turn, has the request processed and, depending on the result, a javascript is executed that changes the parent's content according the the submission's validity.

Now, I don't like this procedure. I want the ability to submit several forms simultaneously, but I have only this one hidden iframe. So I would like to do it with AJAX, creating a separate request for each form submission.

However, my form is complicated; it consists of checkboxes that add variables to arrays, of images that are clicked and whose click coordinates I need sent, and complicated stuff like that - which is why I, instead of calculating each the value of each input and adding it to a post parameter string (by the way: I don't know how I can create arrays that way), I would much prefer to rather have the submission content intercepted, saved as a post string with all those parameters, and then use this string for the AJAX POST request.

That I would like to do in this function:

$('#myForm').submit(function(event){

    // process the submission, e. g. event.getContent().toPostString();

    // create the AJAX request and send it and attach listeners (I know how to do this line ;)

    return false; // I don't want the form submitted (to the iframe)

});

Thanks in advance!

Answer 1

Don't use an iframe, just use jQuery's ajax methods: (I used post() in the example below)

$('#myForm').submit(function(event){

             //url          //post data
    $.post(this.action, $(this).serialize(), function(returnData){
           //do something with returnData
    })

    return false; //do not submit form the normal way

});

Here is an example: http://jsfiddle.net/maniator/Y6r8E/
Type something into the form and submit it.

Answer 2

jQuery's serialize() function will gather the form data for you, to allow for easy form submission via .ajax() or .post().