formで入力された値を別のファイルで使用したい

Question

前提・実現したいこと

index.htmlでformに入力された値(text)を、index2.htmlに表示させたいです。

JavaScriptで行いたいのですが、どのようにコードを書けば値が送れるのかがわかりません。

調べている過程で、 <form action="index2.js> のように書けばいいのかと思い試してみましたが、index2.js で受け取るにはどうすればいいかがわかりませんでした。

今までに画面を遷移するプログラムを書いたことがないので、ご教授いただければと思います。

該当のソースコード

「index.html」のコード

<form id="form1" action="index2.js">
　<input type="text" id="input1">
<form>



「index2.html」のコード

<p id="display_input1">ここに表示させたい</p>

Answer 1

<form id="form1" action="index2.js"> <input type="text" id="input1"> <form>

見た感じ恐らくPOST(データの送信)をしたいのでしょうがJavaScriptは原則としてクライアントサイドの言語なので無理です。
無理ではないですがNode.jsなどのサーバサイドで使えるJavaScriptを使用する必要があります。

そうじゃないのであれば色々やりようはあって、例えばbuttonタグを追加したうえで

  const d = document,
        button = d.getElementById('ボタンID')
        ;

  button.addEventListener('click', () => {
    //クッキーにformに入力された値を書き込む処理
    //index2.jsを読み込ませるページに飛ばす処理
  });

の様な感じにして、クッキーにデータを保存、index2.jsを読み込ませるページを元ページと別にして、そのページでクッキーを読み込ませれば出来ると思います。

ですが、一度「JavaScript　クライアントサイド」などと検索するなどして、JavaScriptで出来る事を一度確認しておくのがおすすめかなと思います。

出来ること出来ない事がごちゃごちゃになってる印象を受けました。

Answer 2

form内容の送信でしたらサーバーサイドの言語は必要です。
PHPやJava（サーブレット）など。
JavaScriptはあくまでイベント駆動なので「リクエストを受け付ける」のではなく、
「何かしらの操作をトリガーにして処理が行われる」ものです。

それでもJavaScriptと仰るのでしたらNode.jsの採用を検討してください。

Answer 3

//index.html

<form  action="index2.html">
<input type="text" name="input1">
<input type="submit" value="send">
</form>

//index2.html

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const matches=location.search.substr(1).match(/(?<=(?:^|&)input1=).+(?=&|$)/);
  if(matches) document.querySelector('#display_input1').textContent=decodeURIComponent(matches[0]);
});
</script>
<p id="display_input1">ここに表示させたい</p>