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?

Richard Dalton · Accepted Answer · 2011-11-03 16:07:48Z

9

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

answered Nov 3, 2011 at 16:07

Richard Dalton

35.8k6 gold badges75 silver badges92 bronze badges

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

Collectives™ on Stack Overflow

submitting multiple forms with AJAX

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related