Prześlij formularze, jeden po drugim z jQuery?

Question

Jak skonfigurować automatyczny system kolejkowania do uruchamiania wielu przesyłek, jeden po drugim? Nie chcę, aby były one przesyłane od razu, lub może to złamać mój skrypt PHP.

Oto prosty przykład, zakładając, że każdy formularz może składać się niezależnie, a formularz główny będzie przesyłał wszystkie formularze w serii.

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

Skrypt pracuję na to narzędzie do tworzenia kopii zapasowych pliki FTP i MySQL wyrzucenia wielu stronach internetowych - zasadniczo zautomatyzowane narzędzie do tworzenia kopii zapasowych dla administratorów internetowych.

Każda forma zawiera wartości do połączenia z FTP i MySQL każdej witryny, a funkcja PHP kopiuje i przechowuje pliki lokalnie i tworzy zrzut MySQL.

Kopiowanie plików może zająć ponad 20 minut na witrynę, dlatego należy utworzyć "przycisk główny", aby zautomatyzować każdą kopię zapasową, jedną po drugiej.

Answer 1

Możesz spróbować tego przykładu jQuery. Zakodowałem to w locie, więc nie jest testowane - ale dostajesz to, co próbuję zrobić.

<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

W tym celu należy ustawić prosty javascript, który byłby po prostu serią zgłoszeń. To byłoby coś takiego:

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

Oczywiście może zajść potrzeba ajaxowania procesu, ponieważ przesłanie formularza wstrzyma wykonywanie javascript.

Zgadzam się z innymi odpowiedziami, które wydają się być logicznym błędem w twoim imieniu i powinieneś popatrzeć na integrację formularzy zamiast tynkowania problemu.

Answer 3

Jeśli jedna forma opiera się na dwóch innych formach, brzmi to tak, jakby stanowiły część tego samego formularza, a backend powinien po prostu określić, które części tej jednej megaformy (z różnymi zestawami danych, ale dla jeden formularz), które są potrzebne. Na podobnej zasadzie lepiej nie polegać wyłącznie na javascriptu, więc robienie tego w ten sposób zapewnia automatycznie bardziej niezawodne rozwiązanie.

Aktualizacja Jeśli masz wiele formularzy, które po prostu udostępniają dane (jak mogą zmieniać dane na formularzu 1 i formularzu 2, które wymagają form3), byłoby bardziej stabilne, zwłaszcza w kontekście sprawdzania poprawności, umieszczanie tych elementów w ukrytych elementach i pozostawić formularze osobno. Posiadanie przez użytkowników danych, które zostaną przesłane i wykorzystane, a następnie ukrycie ich przed wzrokiem, nie jest optymalne, ponieważ łatwiej mogą popełnić błędy w zgłoszeniu (nie mogą tak łatwo przejrzeć i mogą nie rozumieć, że zostaną przesłane). Użycie < typu danych wejściowych = "ukrytych" /> s dla informacji udostępnionych zmniejsza to, ponieważ nie będą one mogły przypadkowo go zmienić. (Możesz przechowywać go w sesji lub cokolwiek chcesz.) Punkt jest taki, aby uniemożliwić im zmianę informacji, na których będziesz polegać i nie będą mogli łatwo wykryć błędów.)

Element formularza zwraca wartość (true/false) po przesłaniu go.

z here

Answer 4

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

Może lepiej, aby przeprojektować swoją aplikację (przód/tył)?

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