フォームの入力値をJavaScriptで受け取ろう | JavaScript基礎

前回までは、クリックや入力などのイベントを受け取り、HTML要素を変更する方法を学びました。ここからは、問い合わせフォームや検索画面など、実際のWeb制作でよく使う機能へ進みます。

今回は、フォームに入力された値をJavaScriptで読み取り、確認欄へ表示するフォームを作ります。

この記事を終えると、次のことができるようになります。

テキスト入力とセレクトボックスの値をvalueで取得できる
チェックボックスの状態をcheckedで判定できる
選択されたラジオボタンを:checkedで取得できる
値が存在しない場合を考慮して処理できる

今回使用するファイル構成

作業用フォルダに、次のファイルを用意します。

javascript-practice/
├── index.html
└── js/
    └── script.js

index.htmlにはフォームを、js/script.jsには入力値を取得する処理を書きます。

入力フォームを用意する

最初に、今回操作するすべてのフォーム部品をHTMLへ記述します。

HTMLを記述する

index.htmlを次の内容にします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>参加申し込み</title>
</head>
<body>
  <h1>参加申し込み</h1>

  <form id="entry-form">
    <p>
      <label for="name">名前</label>
      <input id="name" name="name" type="text">
    </p>

    <p>
      <label for="course">希望コース</label>
      <select id="course" name="course">
        <option value="">選択してください</option>
        <option value="html-css">HTML / CSS</option>
        <option value="javascript">JavaScript</option>
      </select>
    </p>

    <fieldset>
      <legend>受講方法</legend>
      <label>
        <input type="radio" name="attendance" value="online">
        オンライン
      </label>
      <label>
        <input type="radio" name="attendance" value="venue">
        会場
      </label>
    </fieldset>

    <p>
      <label>
        <input id="agreement" name="agreement" type="checkbox">
        注意事項に同意する
      </label>
    </p>

    <button type="submit">入力内容を確認する</button>
  </form>

  <section aria-labelledby="result-heading">
    <h2 id="result-heading">入力内容</h2>
    <p id="result">まだ確認されていません。</p>
  </section>

  <script src="js/script.js"></script>
</body>
</html>

ブラウザで開き、名前、希望コース、受講方法、同意欄が表示されることを確認してください。この時点では、ボタンを押すと通常のフォーム送信が行われ、ページが再読み込みされます。

labelとnameの役割を確認する

labelのforと入力欄のidを同じ値にすると、ラベルをクリックしたときにも入力欄を選択できます。

nameはフォームを送信するときの項目名です。特にラジオボタンでは、同じnameを付けた選択肢が一つのグループになります。今回のattendanceは、オンラインと会場のどちらか一方だけを選べます。

フォームの送信イベントを受け取る

フォーム全体を取得し、submitイベントを受け取ります。

ページの再読み込みを止める

js/script.jsへ次のコードを書きます。

const form = document.querySelector('#entry-form');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  console.log('フォームの入力内容を確認します');
});

フォームの送信ボタンを押すと、フォームでsubmitイベントが発生します。event.preventDefault()は、ブラウザが標準で行う送信処理を止める命令です。

保存してブラウザを再読み込みし、ボタンを押してください。ページが再読み込みされず、DevToolsのConsoleに「フォームの入力内容を確認します」と表示されれば成功です。

ボタンのclickではなくフォームのsubmitを受け取ると、入力欄でEnterキーを押して送信した場合にも同じ処理を実行できます。

フォーム部品ごとの値を取得する

フォーム部品は種類によって値の取得方法が異なります。一つずつ確認します。

テキスト入力の値を取得する

input要素を取得し、valueプロパティを確認します。

const form = document.querySelector('#entry-form');
const nameInput = document.querySelector('#name');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  console.log(nameInput.value);
});

名前に「山田太郎」と入力してボタンを押すと、Consoleに「山田太郎」と表示されます。

valueはHTMLに最初から書かれた値だけでなく、利用者が現在入力している値を表します。入力前なら空文字''です。

前後の空白を入力値として扱いたくない場合は、trim()を使います。

const name = nameInput.value.trim();

たとえば「山田太郎」と入力しても、nameには前後の空白を除いた「山田太郎」が入ります。

セレクトボックスの値を取得する

セレクトボックスもvalueで取得できます。

const courseSelect = document.querySelector('#course');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const name = nameInput.value.trim();
  const course = courseSelect.value;

  console.log(name, course);
});

JavaScriptを選ぶと、画面に表示されている「JavaScript」ではなく、選択中のoptionに指定したvalue="javascript"が取得されます。

表示名は利用者が読む文章、valueはプログラムが扱う値として分けられます。何も選んでいない場合は、最初の選択肢に指定した空文字になります。

チェックボックスの状態を取得する

チェックボックスでは、valueではなくcheckedを使って選択状態を確認します。

const agreementCheckbox = document.querySelector('#agreement');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  console.log(agreementCheckbox.checked);
});

チェックされていれば真偽値のtrue、されていなければfalseが表示されます。

checkedは文字列ではありません。条件分岐では、そのまま条件として使えます。

if (agreementCheckbox.checked) {
  console.log('同意済みです');
} else {
  console.log('同意されていません');
}

選択されたラジオボタンを取得する

ラジオボタンは複数の要素から、現在選択されている一つを探します。

const selectedAttendance = document.querySelector(
  'input[name="attendance"]:checked'
);

:checkedは、選択中のチェックボックスやラジオボタンに一致するCSSの疑似クラスです。querySelector()の引数にはCSSセレクターを指定できるため、選択中の要素だけを取得できます。

何も選択されていない場合、querySelector()の結果はnullです。そのままselectedAttendance.valueを読むとエラーになります。

const attendance = selectedAttendance?.value ?? '未選択';

オプショナルチェーン?.は、左側がnullやundefinedならプロパティを読まずにundefinedを返します。Null合体演算子??は、左側がnullまたはundefinedなら右側の値を使います。

今回は、未選択時に文字列の「未選択」を代わりに使用しています。

取得した値を画面へ表示する

すべての値をまとめて、#resultへ表示します。

コースと受講方法の表示名を用意する

フォームから取得したhtml-cssやonlineは処理に向いた値ですが、そのまま利用者へ表示するには分かりにくい値です。オブジェクトを使って表示名へ変換します。

const courseLabels = {
  'html-css': 'HTML / CSS',
  javascript: 'JavaScript',
};

const attendanceLabels = {
  online: 'オンライン',
  venue: '会場',
};

courseLabels['javascript']を読むと「JavaScript」を取得できます。

完成したJavaScriptを記述する

js/script.jsの内容を、次の完成コードに置き換えます。

const form = document.querySelector('#entry-form');
const nameInput = document.querySelector('#name');
const courseSelect = document.querySelector('#course');
const agreementCheckbox = document.querySelector('#agreement');
const result = document.querySelector('#result');

const courseLabels = {
  'html-css': 'HTML / CSS',
  javascript: 'JavaScript',
};

const attendanceLabels = {
  online: 'オンライン',
  venue: '会場',
};

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const name = nameInput.value.trim();
  const course = courseSelect.value;
  const selectedAttendance = document.querySelector(
    'input[name="attendance"]:checked'
  );
  const attendance = selectedAttendance?.value;
  const agreement = agreementCheckbox.checked;

  const nameText = name || '未入力';
  const courseText = courseLabels[course] ?? '未選択';
  const attendanceText = attendanceLabels[attendance] ?? '未選択';
  const agreementText = agreement ? '同意済み' : '未同意';

  result.textContent =
    `名前：${nameText}／コース：${courseText}／受講方法：${attendanceText}／${agreementText}`;
});

入力内容を変えながらボタンを押し、確認欄へ現在の値が表示されることを確認してください。

うまく動かないときの確認点

Cannot read properties of nullと表示される

document.querySelector()のセレクターとHTMLのidやnameが一致しているか確認します。また、script要素がフォームより前にあると、HTML要素が作られる前にJavaScriptが実行される場合があります。今回のようにbodyの最後で読み込んでください。

ラジオボタンを選ぶと両方とも選択される

同じグループにしたいラジオボタンへ、同じnameを指定しているか確認します。idが同じであってもグループにはなりません。

ボタンを押すとページが再読み込みされる

submitイベントの先頭でevent.preventDefault()を呼び出しているか確認します。eventのスペルや、イベントリスナーの波括弧の位置も確認してください。

変更前の結果が表示される

値はイベントの中で取得してください。ページ読み込み時に一度だけvalueを変数へ入れると、その時点の値が残ります。

まとめ

テキスト入力とセレクトボックスの現在値はvalueで取得する
チェックボックスの選択状態はcheckedで取得する
選択中のラジオボタンは:checkedを含むセレクターで探す
未選択時にnullが返る要素は、条件分岐や?.を使って安全に扱う
フォームはボタンのclickだけでなく、フォームのsubmitイベントで処理する

今回はフォームの値を取得しました。しかし、未入力のままでも確認処理を実行できます。次の記事では、送信前に入力内容を検証し、問題のある項目へエラーメッセージを表示します。