WEB制作マークアップJavaScriptjQueryでformを操る【nameの値を取得する/クリアする】

jQueryでformを操る【nameの値を取得する/クリアする】

form周り、これまでは要素を特定してループさせやすいようにidやclassを付与して、JavaScriptが結構な行数を使って面倒だったけど、jQueryを使えば「さくッ」と取得できて便利。今回は、nameの値を取得する、にフォーカスします。

input type=”text”の値が変更するたびに処理を実行する

$('input[type="text"]').on('input', function () {
});

inputのvalue値

サンプル
<input type="" name="sample" value="" />

type=”text”

$('[name=sample]').val();

type=”radio”

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

チェックがない場合は「undefined」が返ってきます(Firefox 23で確認)。

type=”checkbox”

$('[name=sample]:checked').map(function(){return $(this).val();}).get();

チェックボックスは複数チェックさせることもあるため、そのケアも必要。
この例だと値がセットされた配列を取得できる。
チェックがない場合は「undefined」が返ってきます(Firefox 23で確認)。
チェックがない場合は「[]」と空の配列が返ってきます(Firefox 29で確認)。

selectのvalue値

サンプル
<select name="sample_select">
<option value="">ラベルテキスト</option>
</select>

$('[name=sample_select]').val();

複数選択可能なmultipleのときも取得方法は同様。単数のときはテキストを取得するのに対し、multipleのときは配列で取得する。

値をクリアする

name値によって、クリアする方法が2つに分かれる。

checkedを使って値を取得する場合(input type=”radio” や “checkbox”)

$('[name=sample_select]').removeAttr('checked').prop('checked', false).change();

それ以外(値自体を入力して任意に変化する場合)

$('[name=sample_select]').val('');

select の場合は、初期値の値を空にしておく必要があるので扱い要注意。
(運用上、空にできない場合、たとえばデフォルトで何かを選択した状態にしている場合は、初期値の値をあらかじめ取得して、クリア時にその値をセットするように工夫する必要がある)

補足1 inputmode

inputタグの属性、inputmode を使うと、iPhoneやスマホの仮想キーボードを表示する際、キーボードの種類を制御することができる。ただし、対応状況は現時点(2021年4月現在)ではまだまだなので、マスト要件にしないよう注意。このおもてなしはユーザー体験としては非常に大事なこと。

  • number ・・・数字
  • decimal ・・・小数点ありの数字
  • tel ・・・数字だけでなく#なども押せるキーボード
  • email ・・・アルファベット + @マーク
  • url ・・・ / や .com なども押せるキーボード

対応状況:https://caniuse.com/?search=inputmode

補足2 type=”number”

type属性が、numberのとき、最小値や最大値、上下キーを押したときの幅などいろいろ制御できる。
ブラウザによってサポート状況や挙動が異なるので、あくまでユーザー体験をよくするためのおもてなしとしての利用にとどめる。

  • min ・・・最小値
  • max ・・・最大値
  • step ・・・上下ボタン押したときの差分幅

仕様:https://html.spec.whatwg.org/multipage/input.html#number-state-(type%3Dnumber)
対応状況:https://caniuse.com/input-number