jQueryでフォームを1つずつ送信しますか？

Question

複数のサブミットを1つずつ実行する自動キューシステムを設定するにはどうすればよいですか？私はそれらを一度に提出したくない、または私のバックエンドのPHPスクリプトを壊すかもしれません。

各フォームを個別に送信できると仮定して、簡単な例を示します。マスター送信では、すべてのフォームが連続して実行されます。

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

私が働いているスクリプトは、バックアップFTPファイルや複数のWebサイトのMySQLのダンプツールである - ウェブ管理者のための、基本的に自動バックアップツールを。

各フォームには、各サイトのFTPとMySQLに接続する値が含まれています。また、PHP関数はファイルをローカルにコピーして保存し、MySQLダンプを作成します。

ファイルをコピーするにはサイトごとに20分以上かかることがあるので、各バックアップを自動的に自動化するための「マスターボタン」を作成することです。

Answer 1

このjQueryの例を試すことができます。私はそれをオンザフライでコード化したので、テストされていません - しかし、あなたは私がやろうとしていることを取得します。

<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

これを行うには、一連の単純なjavascriptを設定します。これは単純に一連のサブミットです。

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

明らかに、フォームを送信するとjavascriptの実行が中断されるため、プロセスを改善する必要があるかもしれません。

私はあなたに代わって論理エラーと思われる他の回答に同意します。問題を解決するには、フォームを統合することを検討してください。

Answer 3

1つのフォームが他の2つのフォームに依存している場合、実際には同じフォームの一部であるように聞こえますが、バックエンドはそのメガフォームのどの部分を1つのフォーム）が必要です。同様の注意点では、とにかくjavascriptだけに依存しない方がよいので、このようにすると自動的により堅牢なソリューションが提供されます。

更新データを共有している複数のフォームがある場合（form3が必要とするform1とform2のデータを変更できるような場合）、これらの共有されたものを隠し要素に入れるために、フォームを別々にしておきます。ユーザーが入力ミスをより簡単に行うことができるため（簡単にレビューすることはできず、すべてが提出されることを理解できない可能性があるため）、送信および使用されたデータを表示してから非表示にすることは最適ではありません。 <入力タイプ= "hidden" /> sを共有情報に使用すると、誤って変更することができなくなるので、これを軽減できます。 （セッションに保存するか、何にでも保存してください。ポイントは、依存している情報の変更を防ぎ、間違いを見つけられないようにします）。

フォーム要素は値を返します（真/偽）を提出するとき。 here

Answer 4

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

から

あなたが（バック/フロント）、アプリケーションを再設計するのはたぶん、より良いですか？

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