【HTML】formからデータを取得（画面遷移なし）

HTML

2022.06.09 2021.03.27

こんにちは、素人エンジニアです。

formからデータを取得するときに、画面遷移して困ってしまいました。

そのページ内で入力データを使いたいのに、submitすると画面遷移してしまいます。

方法は色々あると思いますが、ここでは同じページ内でデータを使いたい場合に有効だった方法を紹介します。

画面遷移しないformとbutton

See the Pen 画面遷移せずにformからデータを取得 by doncha2525 (@doncha2525) on CodePen.

formのinputに入力された値を、h1タグで表示するサンプルを作成しました。

<form id="test_form">
  <input type="text" name="test_data">
</form>
<button onclick="displayFormData()">入力値を表示</button>
<h1 id="display"></h1>

function displayFormData(){
  const formElm = document.getElementById("test_form");
  const displayElm = document.getElementById("display");
  displayElm.innerHTML = formElm.test_data.value;
}

buttonをクリックするとonclickイベントが発生されて、
JavaScriptのdisplayFormData()によりformのデータをh1タグで表示されます。

ポイントは、buttonタグをformの中に入れないことです。

buttonタグをform内に入れると画面遷移してしまいます。
また、<input type=”submit”>で送信ボタンを作成してもうまく行きません。

データを送信する必要がないときは、buttonタグをformの外に配置するようにしましょう！

↓↓ HTMLとCSSの学習はこの1冊があれば安心！! ↓↓

リンク