必要ならどうぞ。
デモ
jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS
共通：要素の探し方
input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。
1 2 3 | <form id="my-form"> <input type="text" name="my-text" value="This is text." /></form> |
1 2 | // id="my-form" の中から name="my-text" なものを検索var $input = $('#my-form [name=my-text]'); |
[name=xxx]だけだとフォームが複数あるときに全部取ってきちゃうので、フォームの方にはidを振って、その中から探すようにしました。
テキスト
これが基本パターン。 .val()で得られます。
1 2 3 | <form id="my-form"> <input type="text" name="my-text" value="This is text." /></form> |
1 2 | 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()あたりで数値に変換してやれば大丈夫です。
1 2 3 | <form id="my-form"> <input type="number" name="my-number" value="123" /></form> |
1 2 3 | var valText = $('#my-form [name=my-number]').val();var val = Number(valText) || 0; // NaNのとき0にするconsole.log(val); // => 123 |
「フォームの値の取り方」とはちょっと違うんだけど、まあ覚えておいてください。あと文字列から数値への変換は何パターンかありますので、興味あれば調べてみてくださいな。
ラジオボタン
値を取るという動作自体は単純に .val()で済むんだけど、現実的にやりたいのは選択されている値を取る、というのですよね。
というわけで、name属性で検索した後に:checkedで絞り込むというひと手間を加えます。
1 2 3 4 5 | <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> |
1 2 | var val = $('#my-form [name=my-radio]:checked').val();console.log(val); // => "B" |
あ、もちろん利用者が画面でぽちぽちして選択変えたら、そっちが得られますよ。
チェックボックス
これが面倒くさい。要素の探し方はラジオボタンと一緒なんだけれど、こっちは複数選択されている場合がある。jQueryは値の取得は先頭のものだけが対象になるのが普通で、 .val()もそう。
全部取るために、 .map()でループします。
1 2 3 4 5 | <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> |
1 2 3 | 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です。
1 2 3 4 5 6 7 | <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> |
1 2 | var val = $('#my-form [name=my-select]').val();console.log(val); // => "B" |
表示文字列が欲しいときは
値"B"じゃなくて画面に表示されているやつ"This is B"が欲しいときは、option要素から探す事になります。
あと .val()じゃなくて .text()ね。
1 2 | var text = $('#my-form [name=my-select] option:selected').text();console.log(text); // => "This is B" |
フォーム送信してもサーバーに送られるものではないけれど、選択を画面に反映させたい場合に使えるかなと。
セレクトボックス（複数）
取り方は単数のときと一緒です。なんとなんと、ラジオボタンみたいにループで云々なんて不要！ そのあたりはjQueryがやってくれます。便利だねぃ。
multiple属性のあるselect要素で .val()すると、選択値が配列で得られます。
1 2 3 4 5 6 7 | <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> |
1 2 | var val = $('#my-form [name=my-multi-select]').val();console.log(val); // => ["B", "C"] |
ちなみに選択されてる数によらずに配列になるので、ひとつのときも何も選択されてないときも、配列です。
ファイル
これは無理！
昔は .val()で選択されているファイルのパスとか取れたんだけど、今はセキュリティのアレソレで駄目です。jQueryじゃなくてJavaScriptの方の問題ね。
どうしても必要ならHTML5のFile APIあたりを使います。本稿では触れません。
全部まとめて
フォームの値をまとめて全部取ってくる事も可能です。
form要素に対して .serialize()で送信するのと同じ文字列（URLの”?”以降の部分）が、 .serializeArray()でそれを配列に分解したものを得られます。
1 2 3 4 5 6 7 8 | <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> |
1 2 3 4 5 | 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の方を配列にする感じで。まあいいけど。
おしまい。