2013-07-09 18 views
5

JavaScriptを使用して2つのフォームを同時に送信しようとしています。 しかし、最初の投稿ではなく、2番目の投稿だけが開いているようです。JavaScriptを使用して同時に2つのフォームを送信する

コードは非常に簡単です:

<html> 
<body> 
<form id="report_0" method="POST" target="_blank" action="https://www.google.com"> 
    <input type="hidden" name="test1" value="1"> 
    <input type="submit" value="report_0"> 
</form> 
<form id="report_1" method="POST" target="_blank" action="https://www.google.com"> 
    <input type="hidden" name="test2" value="2"> 
    <input type="submit" value="report_1"> 
</form> 
<script> 
    document.getElementById("report_0").submit(); 
    document.getElementById("report_1").submit(); 
    </script> 
</body> 
</html> 

I ことはできません使用アヤックスまたはそれは私がどこかで読んだ

(によるCORSの問題のために)「ネイティブ」POSTなければならないような等価あなたは一度に2つのフォームを提出することはできませんが、これは私には意味がありません。私はターゲットを "_blank"から "form1" & "form2"に変更しようとしましたが、まだ何もありません。

for (....) { 
     var form = document.createElement("form"); 
     form.setAttribute("name", "report_"+i); 
     form.setAttribute("method", "POST"); 
     form.setAttribute("target", "_blank"); 
     form.setAttribute("action", action); 

     for (var key in parms) { 
      var field = document.createElement("input"); 
      field.setAttribute("type", "hidden"); 
      field.setAttribute("name", key); 
      field.setAttribute("value", parms[key]); 
      form.appendChild(field); 
     } 
     console.log(form); 
     document.body.appendChild(form); 
     form.submit(); 
     document.body.removeChild(form); 
} 
+3

すぐに2つのフォームを提出したいと思うからといって、それを行うことはできません。両方のフォームを提出する「両方を送信」ボタンを追加すると、FirefoxとIEで「動作します」。 – RobG

+1

RobG、Chromeについてはどうですか? – natiz

答えて

1

あなたはそれこの方法を行うことはできません。

あなたの支援が非常に理解されるであろう:)

EDITここ

は、私が実際に使用するものです。フォームが送信されると、ページ全体が「破棄され」、フォームのレスポンスが新しいページとしてロードされます。

JavaScriptコードはシングルスレッドで実行されるため、基本的に2つのフォームで一度に送信イベントをトリガーしています.JSが完了するとブラウザは引き継ぎ、与えられたタスクキューを実行しようとします。

あなたは非AJAXの方法で、「通常」の両方のフォームを提出したいのであれば、あなたがする必要があると思い:

  1. ストア何とかクライアント上の第2の形態の値(クッキー、のlocalStorage
  2. コンテンツのどこかにちょうど同じように見えるページには、トリガーが表示され、JSコードは最初のフォームがすでに送信されていることを確認します。
  3. 値を2番目の形式に復元します(サーバーは送信されていないため、サーバーはそれらを認識しません)。
  4. 2番目の形式を送信します。
+0

私は実際に別の方法でそれをやっています。 – natiz

+0

...上記のEDITを参照してください。 POSTが完了しているページを制御できないため、私はあなたのやり方ではできません。 – natiz

0

フォーム送信は、サーバー(HttpRequest)への同期呼び出しです。したがって、第2の書式は提出することができません。複数のフォームを非同期に依存せずに提出する予定です。ですから、AJAXのようなAPIは問題を解決しますが、あなたはそれを探していません。

デザインに複数のフレーム/ iframeをページに保存できる場合は、それらのフォームを異なるフレーム/ iframeに保存してください。この方法では、親ページから複数のフォームを送信できます。

一度に複数のフォームを提出する要件と制限事項について説明できる場合は、より良い回答を得ることができます。

+0

私はあなたが最初のフォームを意味することを願って..それは行動だからです。 2番目のものだけが提出されます(=最後のもの) – natiz

0

私たちは両方のsyn/asynの方法で達成することができます、下のサンプルの例を参照してください....私はこれがあなたを助けてくれることを願っています。

http://yogendrakrsingh.blogspot.in/2010/03/javascript-trick-submitting-multiple.html

または

MWEのために隠された第三以上のシリアル化の助けを借りて達成することができます。これは既に投稿された、リンク

Is to possible to submit two forms simultaneously?

3

ない、それを行うためのきれいな道の下に喜ばが、私はとにかくそれを共有するためにいいだろうと思いました。私はsetTimeoutを使用して、それを解決することになった:

var requestDelay = 2000; 
document.getElementById("form-a").submit(); 

setTimeout(function() { 
    document.getElementById("form-b").submit(); 
}, requestDelay); 

この方法では、それはform A(2秒の推定と、おそらく、)までに提出された待機した後form Bを提出します。あなたのニーズに合わせてrequestDelayで遊ぶ必要があるかもしれません。

関連する問題