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