Invia moduli, uno dopo l'altro con jQuery?

Question

Come posso configurare un sistema di coda automatico per eseguire più segnalazioni, una dopo l'altra? Non voglio che si presentino subito, o potrebbe spezzare il mio script PHP di backend.

Ecco un semplice esempio, supponendo che ogni modulo possa inviare in modo indipendente e un invio principale eseguirà tutti i moduli in 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> 

UPDATE:

Lo script su cui sto lavorando è uno strumento per il backup dei file FTP e MySQL discarica di più siti web - essenzialmente uno strumento di backup automatizzato per gli amministratori web.

Ogni modulo contiene i valori per connettersi all'FTP e MySQL di ciascun sito e la funzione PHP copia e archivia i file localmente e crea un dump MySQL.

La copia dei file può richiedere più di 20 minuti per sito, quindi l'idea è di creare un "pulsante principale" per automatizzare ogni backup, uno dopo l'altro.

Answer 1

Puoi provare questo esempio di jQuery. L'ho codificato al volo, quindi non è stato testato, ma ottieni ciò che sto cercando di fare.

<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

Per fare ciò, impostare un semplice javascript che sarebbe semplicemente una serie di sottomissioni. Sarebbe qualcosa di simile:

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

Ovviamente potrebbe essere necessario ajaxify il processo come la presentazione di una forma arresterà javascript esecuzione.

Sono d'accordo con altre risposte che questo sembra essere un errore logico a vostro nome e si dovrebbe guardare all'integrazione dei moduli invece di intonacare il problema.

Answer 3

Se una forma si basa su altre due forme, sembra che facciano davvero parte della stessa forma e il back-end dovrebbe solo capire quali parti di quella mega-forma (con diversi set di dati, ma per una forma) che sono necessari. In una nota simile, è meglio non fare affidamento solo su javascript, così facendo in questo modo si ottiene una soluzione automaticamente più solida.

Aggiornamento Se si dispone di più moduli che condividono solo dati (come possono modificare i dati su form1 e form2 di cui ha bisogno il modulo3), sarebbe più stabile, soprattutto alla luce della convalida, mettere tali elementi condivisi in elementi nascosti e lascia le forme separate. Avere utenti che inseriscono i dati che verranno inviati e utilizzati e quindi nasconderlo dalla vista non è ottimale, dal momento che possono più facilmente commettere errori di immissione (non possono essere esaminati facilmente e potrebbero non capire che verranno inviati). L'utilizzo di < tipo di input = "hidden" /> s per informazioni condivise lo allevia perché non saranno in grado di modificarlo accidentalmente. (Oppure memorizzalo nella sessione o come preferisci. Il punto è, impedisci loro di modificare le informazioni su cui fare affidamento e non possono facilmente individuare errori.)

L'elemento modulo restituisce un valore (vero/falso) quando lo invii.

da here

Answer 4

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

Forse meglio per voi per riprogettare l'applicazione (fronte/retro)?

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