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