jQueryはとても便利なプラグインです。
JavaScriptの普及を助けたといっても過言ではありません。
jQueryのおかげで煩雑なコードをかかずに綺麗なコードで色々なものが作れるようになりました。
今回は少し忘れやすい、jQueryでフォームから値を取得する方法をまとめていきます。
テキスト
よく使われる1行のテキストボックスです。
これはとても簡単でform要素に .val() で値を取得することが出来ます。
HTML
<form id="test-form">
<input type="text" name="test-form" value="56">
</form>
JavaScript
var formValue = $('#test-form [name=test-form]').val();
var val = Number(formValue) || 0; // NaNのときは0
alert(val); // => 56
ラジオボタン
値を取る、という意味では .val() で取得出来るのですが、実際に取得したいのは選択されている値を取りたいのですよね。
なので :checked で絞り込むということをやります。
HTML
<form id="test-form">
<input type="radio" name="test-radio" value="1">
<input type="radio" name="test-radio" value="2" checked>
<input type="radio" name="test-radio" value="3">
</form>
JavaScript
var val = $('#test-form [name=test-radio]:checked').val();
alert(val); // => 2
チェックボックス
これが面倒。要素の取得方法はラジオボタンと変わらないのですが、複数選択している場合がある。jQueryで .val() でとれるのは複数ある場合は一番最初に出てくる要素の値だけ。
全部取るためには .map() でループ処理します。
HTML
<form id="test-form">
<input type="checkbox" name="test-checkbox" value="1">
<input type="checkbox" name="test-checkbox" value="2" checked>
<input type="checkbox" name="test-checkbox" value="3" checked>
</form>
JavaScript
var $checked = $('#test-checkbox [name=test-checkbox]:checked');
var valList = $checked.map(function(index, el) { return $(this).val(); });
alert(valList); // => ["2", "3"]
複数あると思われるので配列に値を入れます。
.map() の使い方は以下のドキュメントを参考にしてみてください。
セレクトボックス（単一）
option要素に目もくれず、select要素の値を取れば終わりです。
HTML
<form id="test-form">
<select name="test-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>
JavaScript
var val = $('#test-form [name=test-select]').val();
alert(val); // => "B"
もし This is B の部分を取ってきたい場合は以下のJavaScriptでいけます。
var text = $('#test-form [name=test-select] option:selected').text();
alert(text); // => "This is B"
セレクトボックス（複数）
複数だからまたループするのかぁと思ってたら、今回は全てjQueryがやってくれます。なんて便利なんだjQuery。さすがだよ本当。
普通に .val() しましょう。
HTML
<form id="test-form">
<select name="test-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>
JavaScript
var val = $('#test-form [name=test-multi-select]').val();
alert(val); // => ["B", "C"]
ちなみに何も選択されていないときは空の配列で返ってきます。注意しましょう。
フォーム要素全部
フォームの値を全て取ってくることも可能です。
form要素に対して、 .serialize() で送信すると、URLのGETみたいに URLの?以降の部分が取得出来ます。 .serializeArray() で取得すると配列に分解したものが取得出来ます。
HTML
<form id="test-form">
<input type="text" name="test-text" value="This is text." />
<select name="test-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>
JavaScript
var $form = $('#test-form');
var query = $form.serialize();
var arrVal = $form.serializeArray();
alert(query); // => "test-text=This+is+text.&test-multi-select=B&test-multi-select=C"
alert(arrVal); // => [{name:"test-text", value:"This is text."}, 〜〜〜]
一気にformの値を全て取りたいときはこっちのほうが絶対便利。
やっぱりjQueryって便利ですね。
この記事を読んでいるあなたにおすすめ！
少し古いですがjQueryの使い方の基本はこれを読んでおけば完璧です。
jQuery Community Experts
オライリージャパン
売り上げランキング: 86232
CoffeeScript版「薄い本」です。
これはまだ日本語バージョンは出ていないのですが、日本語訳してくださった方がいるようです。
こういうのは本当に助かりますよね。
これを一読するだけでも相当CoffeeScriptについてわかりそうです。
なんでもある「ドットインストール」ですが、やはりCoffeeScriptの場合もありました。
貴重な日本語文献なのでとても参考になります！
ドットインストールのいいところは、様々な豆知識のようなもの（例えば今回のだと、公式ドキュメントで変換前と変換後を知れる、とか）をどんどん教えてくれるところですよね。
既にわかっている言語でもとりあえず見てみようかな、と思う気がおきます。
これは絶対に役に立つ！
サンプルが100個もあればどうやっても習得出来そうですねｗ
しかもこの「TM Life」さんはたくさんのCoffeeScriptに関する記事を書いています。
ぜひ参考にしましょう。
最後はやはり公式ドキュメントを紹介します。
やはり公式ドキュメントが一番詳しく書いてあるのではないでしょうか。
また、node.jsを入れたり色々環境設定をしなくてもとりあえず動かせる「TRY COFFEESCRIPT」を使用出来るのはすごいよいですね。
なぜ最後に紹介したかというと、やはり英語だからです。少しハードルが高くなってしまいますよね。
