フォームの入力欄を取得してHTMLに出力するやり方!

タイトルにも書いていますがフォームの入力欄を取得から
HTMLに出力する方法になります！
以下今回やりたいことです🙇‍♂️

一般的なテキスト入力欄と検索欄の下準備を行います。

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

name属性とはjsで言う変数みたいなものです。
仮にname属性を付けずにサーバーへ送信した場合
サーバーは送られてきたデータの区別がつきません。
なので名前を付けてあげる必要があります。

今回の簡単な流れです

入力欄に任意の文字を入力　⇨　検索ボタンを押す　⇨　入力欄の文字が表示される！

js側の処理

js側の準備ではファーム内のsubmitボタンが押されたタイミングで
イベントが発生するように記載する必要があります。

今回の完成コードになります。

document.getElementById('form').onsubmit = (e) => {
  e.preventDefault();
  const search = document.getElementById('form').word.value;
  document.getElementById('output').textContent = `${search}の検索結果...`
}

作成していく中で気になった箇所を書いていきます。

e.preventDefault( )って何？

ある要素にイベントが発生すると「イベントオブジェクト」というオブジェクトが
パラメーターとして渡ってきます。
下で記載しますがタグの基本動作をキャンセルさせる必要があるため
イベントオブジェクトを受け取らないといけません。
それを受け取る記載になります。

e.preventDefault()の記載がない場合 せっかく検索したテキストが消えてなくなります。

これはforタグの仕業です。
入力後検索ボタンを押した瞬間にurlの末尾にそのデータが追加されます。
urlが変わった瞬間にブラウザーはページ移動しようとする動きが働きますが
action属性が#の為結局同じページを再度表示します

やっていることは再読み込みと変われない為
テキストが一瞬表示されて消えてしまう現象が起きます。

formタグの検索ボタンが押されたらデータを送ると同時にaction属性で指定された
ページへ移動する動作をキャンセルさせるための記載になります。

ファームの入力内容を読み取る。

ファームタグの入力内容を読み取る必要があります。

取得した < form > 要素.読み取りたいフォーム部分のname属性.value

流れとして

• フォームの情報を習得
• 取得したファーム属性のname属性で指定
• name属性で習得した値はvalueプロバティで指定する

上記の処理の流れがありやりたい事ができるようになりました。

htmlのタグの基本動作をキャンセルさせるpreventDefaultや
valueプロバティあたりはよく使うので覚えていきます！