jQueryのval()を使って各フォーム要素の値を取得する

jQueryを使うことで各フォーム要素の値を取得することが出来ます。今回はそんな方法を学んで自由に値を触れるようになりましょう！！

inputの値を取得する

inputのtypeには様々なものがありますが、特徴的なものとしてtext、radio、checkboxのときについてどのように取得するのか見ていきましょう。

[type=text]の場合

例えば以下のようなHTMLがあった場合、jQueryで値を取得する場合はこうします。

<input type="text" value="Sample">

$('input[type="text"]').val(); // "Sample"を取得することが出来る

文字を動的に取得したい場合は以下のようにkeyupイベントに紐付けるといい感じに値を取得し続けることが出来ます。

$('input[type="text"]').on('keyup', function(){
  var val = $(this).val();
  console.log(val);
});

[type=radio]の場合

radioの場合もtextのときと同様にval()で取得することが出来ます。

<input type="radio" name="sample" value="radio1">Radio1
<input type="radio" name="sample" value="radio2">Radio2

$('input[type=radio][name=sample]:checked').val();

上のjQueryの場合、checkedを指定しているのでチェックされているものが取得されています。

これも動的に取得したい場合はchangeイベントに紐付けるとうまく動きます。

$('input[type=radio][name=sample]').on('change', function(){
  var val = $(this).val();
  console.log(val);
});

[type=checkbox]の場合

チェックボックスの場合、複数選択される可能性があるので少し工夫する必要があります。ただ使うのはval()です。

<input type="checkbox" name="sample_check" value="check1>Check1
<input type="checkbox" name="sample_check" value="check2>Check2

$('input[type=checkbox][name=sample_check]:checked').val();

こちらも動的に取得する場合はchangeイベントで発火するようにします。ただし、取得した値は配列になっているので別途eachメソッドでまわして値を取得しています。

$('input[type=checkbox][name=sample_check]').on('change', function(){
  var values = [];
  $('input[type=checkbox][name=sample_check]:checked').each(function(){
    values.push($(this).val());
  });
  console.log(values);
});

textareaの値を取得する

テキストエリアの値を取得するためにも同様にval()を使います。

<textarea></textarea>

$('textarea').val();

動的に取得する場合は[type=text]のときと同様にkeyupイベントに紐付けるといい感じに取得出来ます。

$("textarea").on("keyup", function(){
    var val = $(this).val();
    console.log(val);
  });

selectの値を取得する

selectの値を取得する場合もval()を使います。

<select>
  <option value="option1">Option1</option>
  <option value="option2">Option2</option>
</select>

$('select').val();

optionにフォーカスする必要がないところがポイントですね。

動的に取得する場合はchangeイベントに紐付けることでいい感じに取得出来ます。

$("select").on("change", function() {
    var val = $(this).val();
    console.log(val);
  });

実際に動くコードで確認する

こちらに実際に動かすことが出来るコードを準備しました。まずは「Run Pen」をクリックしたあとにHTMLやJS、実際に動いている画面を確認出来るので見てみてください。

See the Pen jQueryを使ってフォームの値を取得する by daiki tagami (@dai199) on CodePen.

バージョン情報

• jQuery – 3.3.1

最後に

フォームの値を取得するためにはval()を使って取得することが出来ました。あとはどの要素に対してval()を行うのかがわかれば同じ関数を呼び出すだけで値が取得出来て便利ですね。