3日目:入力内容の取得とイベント

Step1:イベントテスト
onsubmit:onsubmitとは、送信ボタンが押された時に起動するイベント。
formタグに、onsubmitを追加して起動する関数を指定することで送信前の内容のチェックや確認に使用することができる。

  <form action= "#" id = "form">
    <input type ="submit" value ="検索">  
  </form>

上記のようなformは、送信(submit)ボタンがクリックされたら、action属性のURLに入力内容が送信される。
onsubmitイベントは送信ボタンがクリックされた直後で、入力内容がサーバーに送信される前直前に発生する。

要素にイベントを設定するときの書き方は下記の通り。

取得した要素.onsubmit = function() ={
	処理内容
};

イベントに代入するファンクションはファンクション名もリターンもないことに注意(こういったファンクションも存在する

Step2:入力内容を読み取って出力

<section>
  <form action= "#" id = "form">
    <input type ="text" name ="word">  
    <input type ="submit" value ="検索">  
  </form>
  <p id='output'></p>
</section>

document.getElementById('form').onsubmit = function() {
  const search = document.getElementById('form').word.value;
  document.getElementById('output').textContent = `${search}の準備中`;
};

上記のようなコードを実行すると、
1:テキスト欄が出てくる
2: document.getElementById('form')によってid = "form"の要素が取り出され、その中のwordの値がsearchに入る
3:id ="output"の要素のtextContentに文字が入力され、表示される。

ただし、この時URLが移動しようとするため、一度同じページを読み込んでしまい、2回検索をしないと表示されない状態となっている。
そのため、下記の方法で「送信ボタンがクリックされたらデータを送ると同時に、action属性で指定されたページに移動する」
というフォームの基本動作をキャンセルする。

document.getElementById('form').onsubmit = function(event) {
  event.preventDefault();
  const search = document.getElementById('form').word.value;
  document.getElementById('output').textContent = `${search}の準備中`;

function()内の引数(event)はイベントオブジェクトという、イベントが発生した時に実行されるファンクションに渡されるオブジェクトである。
このオブジェクトに対してpreventDefault()メソッドを実行するとイベントが発生したタグ(今回の場合