【JavaScript】フォームの入力内容を取得する

フォームボタンを押したらアクションを起こす

HTMLではフォームボタンを作成することができます。

<form action ="#" id ="form">
  <input type = "submit" value="HELLOボタン">
</form>

document.getElementById('form').onsubmit = function(){
  window.alert('HELLO!!');
  console.log('hello!');
};

<form></form>で囲まれているのがフォームです。フォームは送信ボタン<input type=”submit” value=”表示名”>がクリックされると、指定された場所に入力内容のデータを送信します。

formタグaction属性には、データを送信する先のURLを指定します。どこにも送信しない場合には「#」を使います。

inputタグのtype属性のsubmitはボタンを作成します。type属性には他にも様々あります。

type属性の一覧をサンプル付きで紹介

クリックされたら処理を起こす：onsubmit

onsubmitイベントは、送信ボタンがクリックされた直後でデータが送信される直前に起こります。このonsubmitイベントでは返り値はありません（returnできません）。

document.getElementById('ID名').onsubmit = function(){
  クリックされた時の処理内容
};

入力されたテキスト内容を取得する

<form action="#" id="form">
  <input type ="text" name = "word" value="名前を入力">
  <input type ="submit" value="検索">
</form>

<p id = SerchOutput></p>

document.getElementById('form').onsubmit = function(event){
  event.preventDefault();
  const search = document.getElementById('form').word.value;
  document.getElementById('SerchOutput').textContent =`${search}を検索しました`;
};

１つ１つ解説していきましょう。

<input type ="text" name = "word" value="名前を入力">

type属性をtextにするとテキスト入力フォームとなります。また、入力したデータはname属性に示した名前がつけられます。「word = 入力した値」のようなイメージです。name属性がないと、入力されたデータを扱うことはできません。

valueは最初に表示する値を示します。空白ならば書く必要がありません。また、入力されたデータを保存する場所でもあります。

const search = document.getElementById('form').word.value;

獲得したい要素をdocument.getElementById(‘form’)で取得します(（id=”form”)の要素）。続いて「.word」では、inputタグのword(name属性）を指定してinputタグを指定します。inputタグで入力された値はvalueプロパティに保存されているため、「.value」を最後に記します。

event.preventDefault();

event.preventDfaultはfunction(event)で起こる動作を起こさせないようにします。このpreventDfault()がないと、submitボタンを押すと、URLの末尾に文字列が追加されます。すると、ブラウザがリロードしてしまい、「○○を検索しました」との文字がすぐに消えてしまうという現象が、上のコードでは起こります。