51081


大変お世話になっております。

標題の件に関し、検索等でjavascriptの記述を拝見し、参考にさせて頂きながら以下の様に自らも試しているのですが、順番を変えながら試してもform1、form2のどちらか一方だけが送信されるものの、もう一方は送信されません。

(以下のformは分かりやすくする為、簡略化しております。form自体の内容がformが起動されない原因ではないと考えている為。)

個別に送信すると、どちらも次ページの画面を開きながらformを送信するのですが、同時送信にすると、一つのformが送信されると、もう一方のformは起動されない様です（一つの画面が開いていると、二つめの画面は開けないのでしょうか？）。

同時に2つの画面を開きながらformを送信することは不可能なのでしょうか。他の手法でも宜しいので、何とかご教授頂けませんでしょうか。

[code]

    <script type="text/javascript">
    <!--
    function send() {
    document.getElementById('form1').submit();
    document.getElementById('form2').submit();
    }
    //-->
    </script>
    
    <form id="form1" method="post" action="www.xxx.com/form1" target="_blank">
    <form id="form2" method="post" action="www.xxx.com/form2" target="_blank">
    
    <input type="button" value="送信する" onClick="send()">
    
[/code]


CC BY-SA 4.0
2018-12-09T15:30:15.160
51071
2018-12-10T04:47:10.217
2018-12-09T23:38:50.410
19211
19211
question
javascript html form
あるページの複数のformを一回のクリックでそれぞれ送信することは可能でしょうか。


Google
Chromeでは、1回のクリックで複数のフォームを送信するようなスクリプトは制限されているようです。おそらく、通常のウェブページにおいて1クリックで複数のページが開くことは稀であり、広告などユーザーに悪体験をもたらす動作である可能性が高いことから制限されているのだと思います。  
一応、Firefoxではご提示のスクリプトで正しく2つのフォームが送信されました。（すみませんが、IEなど他のブラウザは未確認です。）

この制限を回避する方法としては、やや強引ですが以下のようにフォームを別のiframeにコピーしてから送信する方法があります。

[code]

    <script type="text/javascript">
    <!--
    function send() {
      sendFormFromIframe(document.getElementById('form1'));
      sendFormFromIframe(document.getElementById('form2'));
    }
    
    function sendFormFromIframe(form) {
      // 新しくiframeを作成して設置
      var iframe = document.createElement('iframe');
      iframe.src = "./tmp";
      // CSSで非表示に設定
      iframe.style.display = 'none';
      document.body.appendChild(iframe);
      // iframeの読み込みが完了したらフォームを中にコピー
      iframe.onload = function() {
        var iframeDocument = iframe.contentDocument;
        var clonedForm = iframeDocument.importNode(form, true);
        iframeDocument.body.appendChild(clonedForm);
        clonedForm.submit();
      };
    }
    //-->
    </script>
    
[/code]

ただし、この方法ではユーザーのクリックに呼応する動作であるとは見なされなくなるためか、 **ポップアップブロック機能**
により結局新しい画面の表示がブロックされてしまいます。ポップアップブロックを無効にすることで、一応目的の動作を達成することはできます。  
（ポップアップブロックを無効にする必要があるのは、複数のタブを開くという動作をさせなければいけない以上仕方のないことなのではないかと思います。）

また、もし「フォームが送信されること」が重要なのであって「フォームを送信した結果の画面が開くこと」が特に必要ないのであれば、XMLHttpRequest等（いわゆるAjax）を用いてフォームの送信と同等のリクエストを発生させることも可能です。これが一番現代的な方法かと思います。


CC BY-SA 4.0
2018-12-10T04:14:21.007
51081
2018-12-10T04:47:10.217
2018-12-10T04:47:10.217
30079
30079
51071
answer