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

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

ページのフォームに入力された値を取得するときは、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の記載は省略しますが、ブラウザで表示すると次のようなフォームになります。

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

コード例

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

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

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

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

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

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

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

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

	// 非表示の項目（セッションの受け渡しなどで使用）
	let 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プロパティの参照を行っています。