jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。

必要ならどうぞ。

デモ

jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS

jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS

共通：要素の探し方

input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。

<form id="my-form">
  <input type="text" name="my-text" value="This is text." />
</form>

// id="my-form" の中から name="my-text" なものを検索
var $input = $('#my-form [name=my-text]');

[name=xxx]だけだとフォームが複数あるときに全部取ってきちゃうので、フォームの方にはidを振って、その中から探すようにしました。

テキスト

これが基本パターン。 .val()で得られます。

<form id="my-form">
  <input type="text" name="my-text" value="This is text." />
</form>

var val = $('#my-form [name=my-text]').val();
console.log(val);  // => "This is text."

数値

HTML5からtypeにnumberが追加されました。まあ今までもtextでやってきたと思うんですが、ともかく .val()するとstring型で返ってきます。数値の加算2+3は5になりますが、文字列"2"+"3"は"23"になっちゃいますからね。要注意。

で、取ってきた文字列をNumber()あたりで数値に変換してやれば大丈夫です。

<form id="my-form">
  <input type="number" name="my-number" value="123" />
</form>

var valText = $('#my-form [name=my-number]').val();
var val = Number(valText) || 0;  // NaNのとき0にする
console.log(val);  // => 123

「フォームの値の取り方」とはちょっと違うんだけど、まあ覚えておいてください。あと文字列から数値への変換は何パターンかありますので、興味あれば調べてみてくださいな。

ラジオボタン

値を取るという動作自体は単純に .val()で済むんだけど、現実的にやりたいのは選択されている値を取る、というのですよね。

というわけで、name属性で検索した後に:checkedで絞り込むというひと手間を加えます。

<form id="my-form">
  <input type="radio" name="my-radio" value="A" />
  <input type="radio" name="my-radio" value="B" checked />
  <input type="radio" name="my-radio" value="C" />
</form>

var val = $('#my-form [name=my-radio]:checked').val();
console.log(val);  // => "B"

あ、もちろん利用者が画面でぽちぽちして選択変えたら、そっちが得られますよ。

チェックボックス

これが面倒くさい。要素の探し方はラジオボタンと一緒なんだけれど、こっちは複数選択されている場合がある。jQueryは値の取得は先頭のものだけが対象になるのが普通で、 .val()もそう。

全部取るために、 .map()でループします。

<form id="my-form">
  <input type="checkbox" name="my-checkbox" value="A" />
  <input type="checkbox" name="my-checkbox" value="B" checked />
  <input type="checkbox" name="my-checkbox" value="C" checked />
</form>

var $checked = $('#my-form [name=my-checkbox]:checked');
var valList = $checked.map(function(index, el) { return $(this).val(); });
console.log(valList);  // => ["B", "C"]

複数あるかもなので、値も配列に詰めてます。

あ、 .map()の使い方は解説しないので、わからない人は探してみてくださいね。

んー、もっと良いやり方があるかもしれない。

セレクトボックス（単数）

HTMLはラジオボタンに似てるけど、選択されているoption要素を探す必要はなくて、単にselect要素の値を取ればOKです。

<form id="my-form">
  <select name="my-select">
    <option value="A">This is A</option>
    <option value="B" selected>This is B</option>
    <option value="C">This is C</option>
  </select>
</form>

var val = $('#my-form [name=my-select]').val();
console.log(val);  // => "B"

表示文字列が欲しいときは

値"B"じゃなくて画面に表示されているやつ"This is B"が欲しいときは、option要素から探す事になります。

あと .val()じゃなくて .text()ね。

var text = $('#my-form [name=my-select] option:selected').text();
console.log(text);  // => "This is B"

フォーム送信してもサーバーに送られるものではないけれど、選択を画面に反映させたい場合に使えるかなと。

セレクトボックス（複数）

取り方は単数のときと一緒です。なんとなんと、ラジオボタンみたいにループで云々なんて不要！　そのあたりはjQueryがやってくれます。便利だねぃ。

multiple属性のあるselect要素で .val()すると、選択値が配列で得られます。

<form id="my-form">
  <select name="my-multi-select" size="3" multiple>
    <option value="A">This is A</option>
    <option value="B" selected>This is B</option>
    <option value="C" selected>This is C</option>
  </select>
</form>

var val = $('#my-form [name=my-multi-select]').val();
console.log(val);  // => ["B", "C"]

ちなみに選択されてる数によらずに配列になるので、ひとつのときも何も選択されてないときも、配列です。

ファイル

これは無理！

昔は .val()で選択されているファイルのパスとか取れたんだけど、今はセキュリティのアレソレで駄目です。jQueryじゃなくてJavaScriptの方の問題ね。

どうしても必要ならHTML5のFile APIあたりを使います。本稿では触れません。

全部まとめて

フォームの値をまとめて全部取ってくる事も可能です。

form要素に対して .serialize()で送信するのと同じ文字列（URLの”?”以降の部分）が、 .serializeArray()でそれを配列に分解したものを得られます。

<form id="my-form">
  <input type="text" name="my-text" value="This is text." />
  <select name="my-multi-select" size="3" multiple>
    <option value="A">This is A</option>
    <option value="B" selected>This is B</option>
    <option value="C" selected>This is C</option>
  </select>
</form>

var $form = $('#my-form');
var query = $form.serialize();
var param = $form.serializeArray();
console.log(query);  // => "my-text=This+is+text.&my-multi-select=B&my-multi-select=C"
console.log(param);  // => [{name:"my-text",value:"This is text."},（省略）]

まとめて検証するときとか、個別に取ってくるよりこっちの方が楽かもしれない。

.serializeArray()は配列じゃなくてnameをキーにした連想配列だと扱いが楽だなーって思いました。複数あるものはvalueの方を配列にする感じで。まあいいけど。

おしまい。