submitting multiple forms with AJAX

Question

I have a page which contains several forms. I want to add a single submission button that will allow all the forms to be saved at the same time, as illustrated below:

<form id="form1" name="form1" action="someAction" method="post">
    ....form fields
</form>

<form id="form2" name="form2" action="someOtherAction" method="post">
    ....form fields
</form>

<form id="form2" name="form2" action="anotherAction" method="post">
    ....form fields
</form>

<a href="somewhere.html" onclick="submitAll();">Submit All Forms</a>

<script>
    function submitAll() {
        document.form1.submit();
        document.form2.submit();
        document.form3.submit();
    }
</script>

The issue I'm having is that once the first form gets submitted, it is redirecting the page to that form's destination - I want to intercept that redirect so that I can process the next form.

I know that this can be done via AJAX, which would somehow allow me to catch the returned page (and ignore it if I so choose), but I can't figure out how to do this without mapping each of the fields in the form manually.

Can anyone help?

Answer 1

This should submit each form via ajax without having to map the fields yourself:

$('form').each(function() {
    var that = $(this);
    $.post(that.attr('action'), that.serialize());
});