Posting/submitting multiple forms in jQuery

Question

I have two forms on a page (one is being grabbed by AJAX). I need them both to be posted, so I serialize the second one and send it in a post using jQuery before submitting the first one. However, only the first form appears to be getting posted. The odd thing is though, if I put an alert after the serialized post it works as expected. What exactly is my problem here?

$("#submit").livequery('click', function() {
    var form = $("#second_form");
    var action = form.attr("action");
    var serialized_form = form.serialize();
    $.post(action, serialized_form);

    //alert('test');

    $("#first_form").submit();

    return false;
});

Is there any better way to post two forms and then redirect to a new page on a button press? I tried posting both of them using the method above and then using window.location to change pages but I had a similar problem.

Much thanks!

Answer 1

You might try submitting "first_form" in a callback from the post of "second_form". I believe that the submit of "first_form" is unloading the page which causes the second post to be aborted. Doing the post of "first_form" in the callback from "second_form" will ensure that the initial post is complete before the second post begins.

$("#submit").livequery('click', function() {
    var form = $("#second_form");
    var action = form.attr("action");
    var serialized_form = form.serialize();
    $.post(action, serialized_form, submit_first);
});

function submit_first(val) {
   $("#first_form").submit();
}