presentando múltiples formularios con AJAX

Question

Tengo una página que contiene varios formularios. Quiero añadir un botón de presentación única que permitirá a todas las formas que se guardan al mismo tiempo, como se ilustra a continuación:

<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> 

El problema que estoy teniendo es que una vez que la primera forma se presentó, es redirigiendo la página al destino de ese formulario: quiero interceptar esa redirección para poder procesar el siguiente formulario.

Sé que esto se puede hacer a través de AJAX, lo que de alguna manera me permitiría atrapar la página devuelta (e ignorarla si así lo quisiera), pero no puedo encontrar la manera de hacerlo sin mapear cada una de las campos en forma de forma manual.

¿Alguien puede ayudar?

Answer 1

Esto debe presentar cada formulario a través de AJAX sin tener que asignar los campos ti mismo:

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