1

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

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

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

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

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

<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()">

1 件の回答 1

2

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

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

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

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

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

1
  • Faily Feely様、 無理な質問をした様で大変恐縮でございます。それにも拘らず完全なご回答、そしてご解説を頂きましてありがとうございます。 仰る通りポップアップブロックの表示がありますが、解除すると見事にform1,form2が同時に送信、完結されます。 ただし、当サイトの運用的観点から総合的に判断すると、クローム以外のブラウザーやその各バージョンでの稼働状況、 ユーザビリティーなど、将来的な不確定要素が高く、よって現在仰られたAjax、また他の方法を模索中でございます。 何も理解しないで質問してしまい本当に申し訳ございません。そして本当に感謝致します。 Commented 2018年12月10日 8:25

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。