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