@manabuQiita (mnb)posted at 2021-02-21

遷移先画面のsubmitボタンを押したい

Q&A

解決したいこと

タイトルの通り。

あるhtmlページ①内のformからsubmitをして別のurlにrequestをpostで送信しています。
遷移先のhtmlページ②もformタグとsubmitがあります。
とある事情で、最初のページからsubmitしたタイミングでページ②のsubmitも同時に実行したいです。

発生している問題・エラー

以下簡略化したソースですが、

該当するソースコード

<p>画面①</p>
<form action="https://XXX" id="form1" method="post">
<input type="button" value="送信" onclick="doSubmit()">
</form>

<script>
  function doSubmit(){
    var frm1 = document.getElementById("form1");
　　//自ページの情報はsubmit可能。
    frm1.submit();
  }
</script>

自分で試したこと

actionに記載したURLには遷移するのですが、手動でボタンを押下するしかできません。
JavaScript内で遷移先のURLのHTMLを取得し、documentオブジェクト自体を生成すれば操作できるかもと考えましたが、具体的な生成方法が分かりませんでした。
自分のページ情報はdocumentオブジェクトで取得できるかと思いますが、別URLの情報は取得できないのでしょうか？
当方、Javascriptの知識が浅く、根本違いな質問かもしれませんがご教示頂けると助かります。

@netebakari posted at 2021-02-21

JavaScript内で遷移先のURLのHTMLを取得し、documentオブジェクト自体を生成すれば操作できるかも

良い線を行っています。以下サンプルとして、「htmlページ①」に相当する post1.php, 「htmlページ②」に相当する post2.php, そして最後の遷移先に相当する post3.php を用意しました。

post1.php

<html><body>
画面1
<form action="./post2.php" id="form1" method="post">
  <input type="text" name="message" id="text1" value="" />
  <input type="submit" />
</form></body></html>

post2.php

<html><body>
画面2
<form action="./post3.php" id="form2" method="post">
  <input type="text" name="message" id="text2" value="<?php echo $_POST["message"]; ?>" />
  <input type="submit" />
</form></body></html>

post3.php

<html><body>
<h3>結果表示画面</h3>
message = <?php echo $_POST["message"]; ?>
</body></html>

PHPであることに本質的な意味はありません。 post1.php を開いてsubmitすると post2.php に飛びます。その際には最初のテキストボックスの値が引き継がれます。もう一度submitすると post3.php に飛び、結果が表示される、というだけのものです¹。

で、画面遷移してしまうとJavaScriptのコードは全部吹っ飛んでしまいますので、これをJavaScriptでコントロールするには別のページがあると良さそうです。用意しました。

index.html

<html><body>
テスト用画面
<button onClick="go()">go!</button>
<iframe src="./post1.php" id="iframe"></iframe>
</body>
<script>
function go() {
  const iframe = document.querySelector("#iframe");
  iframe.contentDocument.querySelector("#text1").value = "HELLO";
  iframe.contentDocument.querySelector("#form1").submit();

  setTimeout(() => {
    iframe.contentDocument.querySelector("#form2").submit();
  }, 1000);
}
</script>
</html>

これも見たままですが、

iframe で post1.php を自分のDOMの中に作る
contentDocument 経由で適当に値を突っ込んでPOSTする
画面遷移を待つために1秒ウェイトを入れて²再度POSTする

という処理を行います。iframeは過去色々と邪悪な目的に使われてきた歴史があるため様々な制約がかけられています。もしかしたら目的にはマッチしないかもしれませんが、こんな手もあるということで何らかのヒントになれば幸いです。

エスケープなどは一切行っていませんのでよろしくお願いします ↩
onloadイベントとかを捕まえるのが正道な気もします ↩

1Like

Are you sure you want to delete the question?