¿Presentar formularios, uno tras otro con jQuery?

Question

¿Cómo puedo configurar un sistema de cola automatizado para ejecutar múltiples envíos, uno tras otro? No quiero que se presenten de inmediato, o puede romper mi script backend de PHP.

Aquí hay un ejemplo simple, suponiendo que cada formulario se puede enviar de forma independiente, y un envío maestro ejecutará todos los formularios en serie.

<input type="submit" id="submit_all" value="Submit All" /> 

<form id="form-1" method="post" action="function.php"> 
<input type="text" name="foo" value="Foo" /> 
<input type="submit" value="Submit" /> 
</form> 

<form id="form-2" method="post" action="function.php"> 
<input type="text" name="foo" value="Foo" /> 
<input type="submit" value="Submit" /> 
</form> 

<form id="form-3" method="post" action="function.php"> 
<input type="text" name="foo" value="Foo" /> 
<input type="submit" value="Submit" /> 
</form> 

ACTUALIZACIÓN:

El guión que estoy trabajando es la herramienta de copia de seguridad de los archivos FTP y MySQL volcado de múltiples sitios web - esencialmente una herramienta de copia de seguridad automatizada para los administradores web.

Cada formulario contiene los valores para conectarse al FTP y MySQL de cada sitio, y la función PHP copia y almacena los archivos localmente y crea un volcado de MySQL.

Copiar los archivos puede llevar más de 20 minutos por sitio, por lo que la idea es crear un "botón maestro" para automatizar cada copia de seguridad, una después de la otra.

Answer 1

Puede probar este ejemplo de jQuery. Lo codifiqué sobre la marcha, por lo que no está probado, pero obtienes lo que intento hacer.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script type="text/javascript"> 
var state = false; 

$(document).ready(function() { 
    $('#submit_all').click(function() { 
     go(); 

     // get all forms on the page 
     $forms = $('form'); 
     sent = 0; 

     // post the form (non-async) 
     $forms.each(function() { 
      if(state) { 
      $.ajax({ 
       type: "post", 
       async: false, 
       url: $(this).attr("action"), 
       data: $(this).serialize(), 
       success: function(data) { 
        if(++sent == $forms.length) { 
         alert("All forms submitted!"); 
        } 
       } 
      }); 
      } else { return false; } 
     }); 
     stop(); 
    }); 

    $('#cancel').hide().click(stop); 

    function go() { 
     if(!state) { 
      state = true; 
      $('#submit_all').hide(); 
      $('#cancel').show(); 
      $('input[type=button], input[type=submit]').attr("disabled", "disabled"); 
    }} 

    function stop() { 
     if(state) { 
      state = false; 
      $('#submit_all').show(); 
      $('#cancel').hide(); 
      $('input[type=button], input[type=submit]').removeAttr("disabled"); 
    }} 
}); 
</script> 

<input type="button" id="submit_all" value="Submit All" /> 
<input type="button" id="cancel" value="Cancel" /> 

<form id="form-1" method="post" action="function.php"> 
<input type="text" name="foo" value="Foo" /> 
<input type="submit" value="Submit" /> 
</form> 

<form id="form-2" method="post" action="function.php"> 
<input type="text" name="foo" value="Foo" /> 
<input type="submit" value="Submit" /> 
</form> 

<form id="form-3" method="post" action="function.php"> 
<input type="text" name="foo" value="Foo" /> 
<input type="submit" value="Submit" /> 
</form> 

Answer 2

Para hacer esto, configuraría un javascript simple que simplemente sería una serie de envíos. Sería algo así como:

function submitAll() { 
    document.forms["form-1"].submit(); 
    document.forms["form-2"].submit(); 
    document.forms["form-3"].submit(); 
} 

Obviamente es posible que necesite ajaxify el proceso como enviar un formulario detendrá ejecución de JavaScript.

Estoy de acuerdo con otras respuestas que esto parece ser un error lógico en su nombre y debería considerar integrar los formularios en lugar de enmascarar el problema.

Answer 3

Si una forma se basa en otras dos formas, parece que son realmente parte de la misma forma, y ​​el backend debería averiguar qué partes de esa misma megaforma (con diferentes conjuntos de datos, pero para una forma) que se necesitan. En una nota similar, es mejor no confiar en javascript solo de todos modos, por lo que hacerlo de esta manera le proporciona una solución automáticamente más sólida.

Actualización Si tiene múltiples formularios que solo comparten datos (como pueden cambiar los datos en form1 y form2 que form3 necesita), sería más estable, especialmente a la luz de la validación, poner esas cosas compartidas en elementos ocultos y deja los formularios por separado. No es óptimo que los usuarios ingresen los datos que se enviarán y usarán, y luego ocultarlos de la vista, ya que pueden cometer errores de entrada más fácilmente (no se pueden revisar tan fácilmente y es posible que no comprendan que se enviarán todos). Usar < tipo de entrada = "oculto" /> s para información compartida alivia esto porque no podrán cambiarlo accidentalmente. (O guárdelo en la sesión o lo que prefiera. El punto es evitar que cambien información en la que va a confiar y no pueden detectar fácilmente los errores.)

El elemento de formulario devuelve un valor (verdadero/falso) cuando lo envíe.

de here

Answer 4

$("#submit_all").click(function(){ 
    $("#form-1").submit(); 
    $("#form-2").submit(); 
    $("#form-3").submit(); 
}) 

Tal vez mejor para que vuelva a diseñar su aplicación (delante/detrás)?

<form method="post" action="./function.php"> 
    <input type="text" name="foo[]" value="Foo" /> 
    <input type="text" name="foo[]" value="Foo" /> 
    <input type="text" name="foo[]" value="Foo" /> 
    <input type="submit" id="submit_all" value="Submit All" /> 
</form>