JavaScript

レシピ

フォーム

フォームに入力された値を取得する

フォームで入力や選択された値を取得する方法について解説します。

この記事のポイント

  • input要素select要素textarea要素は全てvalueプロパティから入力値を取得
  • チェックボックス、ラジオボタンのような複数の選択肢がある入力は擬似セレクター「:checked」を使う

フォームに入力された値を取得する

ページのフォームに入力された値を取得するときは、valueプロパティを参照します。

今回は解説用に以下のHTMLコードを使います。
赤字のHTML要素が、入力された値・選択された値を取得する対象です。

HTMLコード例

<form method="post" action="">
  <div>
    <label for="your_name">氏名:</label><input type="text" id="your_name" name="your_name" value="" placeholder="氏名を入力してください">
  </div>
  <div>
    <label for="age">年齢:</label>
    <select id="age" name="age">
      <option value="1">〜19歳</option>
      <option value="2">20歳〜29歳</option>
      <option value="3">30歳〜39歳</option>
      <option value="4">40歳〜49歳</option>
      <option value="5">50歳〜59歳</option>
      <option value="6">60歳〜</option>
    </select>
  </div>
  <div>
    <label for="gender">性別:</label>
    <label for="gender_male"><input type="radio" id="gender_male" name="gender" value="1">男性</label>
    <label for="gender_female"><input type="radio" id="gender_female" name="gender" value="2">女性</label>
    <label for="gender_noanswer"><input type="radio" id="gender_noanswer" name="gender" value="3">回答しない</label>
  </div>
  <div>
    <label for="etc">その他なにかお問い合わせなどあればご記入ください。</label>
    <textarea id="etc" name="etc"></textarea>
  </div>
  <div>
    <label for="privacy_policy"><input type="checkbox" id="privacy_policy" name="privacy_policy" value="1">個人情報保護方針に同意する</label>
  </div>
  <input type="submit" name="btn_submit" value="送信">
  <input type="hidden" name="form_session" value="ta9galkjlsGJ==">
</form>

CSSの記載は省略しますが、ブラウザで表示すると次のようなフォームになります。

ブラウザの表示例
Chromeでの表示例

以下のJSコードはこちらのフォームの各項目を入力したあとに、「送信」ボタンを押すと入力された値を取得して出力します。
なお、今回は送信ボタンによるフォームの送信をpreventDefaultメソッドでキャンセルした上で各入力項目の値を取得します。

コード例

var input_submit = document.querySelector("input[type=submit]");
input_submit.addEventListener("click", function(e){

	// フォームの送信キャンセル
	e.preventDefault();

  // 氏名
	var input_name = document.querySelector("input[name=your_name]");
	console.log(input_name.value); // テスト太郎

  // 年齢
	var input_age = document.querySelector("select[name=age]");
	console.log(input_age.value); // 3

  // 性別
	var input_gender = document.querySelector("input[name=gender]:checked");
	if( input_gender ) {
		console.log(input_gender.value); // 1
	}

  // その他
	var input_etc = document.querySelector("textarea");
	console.log(input_etc.value); // よろしく

  // 個人情報保護方針への同意
	var input_privacy_policy = document.querySelector("input[name=privacy_policy]:checked");
	if( input_privacy_policy ) {
		console.log(input_privacy_policy.value); // 1
	}

  // 送信ボタン
	var input_submit = document.querySelector("input[name=btn_submit]");
	console.log(input_submit.value); // 送信

  // 非表示の項目(セッションの受け渡しなどで使用)
	var input_hidden = document.querySelector("input[name=form_session]");
	console.log(input_hidden.value); // ta9galkjlsGJ==
});

1行目では送信ボタンのHTML要素を取得して、イベントリスナーでクリックを設定しています。
ここでイベントを引数eとして渡して、preventDefaultメソッドを実行することでフォームの送信を取り消しています。

以降は各入力項目の値を取得&出力する処理ですが、input要素、プルダウンメニューのselect要素、複数行のテキスト入力するtextarea要素はいずれもvalueプロパティから入力した値を取得することができます。

ただし、上記の「性別」「個人情報保護方針への同意」のようなラジオボタンやチェックボックスの入力項目がある場合は、HTML要素を取得する方法が他のケースと異なるため注意が必要です。
上記の例ではquerySelectorメソッドを使っているため、選択された項目を取得するときに擬似セレクター「:checked」を使っています。

入力が選択式のときは何も選択されていない可能性もありますが、そのときはHTML要素が取得できないためvalueプロパティを参照しようとするとエラーになってしまいます。
そのため、上記の例では選択されたHTML要素が取得できているかをif文で確認したうえでvalueプロパティの参照を行っています。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。