【jQuery】フォームから様々な値を取得する方法まとめ


jQueryはとても便利なプラグインです。
JavaScriptの普及を助けたといっても過言ではありません。
jQueryのおかげで煩雑なコードをかかずに綺麗なコードで色々なものが作れるようになりました。
今回は少し忘れやすい、jQueryでフォームから値を取得する方法をまとめていきます。

テキスト

よく使われる1行のテキストボックスです。
これはとても簡単でform要素に .val() で値を取得することが出来ます。

HTML

JavaScript

ラジオボタン

値を取る、という意味では .val() で取得出来るのですが、実際に取得したいのは選択されている値を取りたいのですよね。
なので :checked で絞り込むということをやります。

HTML

JavaScript

チェックボックス

これが面倒。要素の取得方法はラジオボタンと変わらないのですが、複数選択している場合がある。jQueryで .val() でとれるのは複数ある場合は一番最初に出てくる要素の値だけ。
全部取るためには .map() でループ処理します。

HTML

JavaScript

複数あると思われるので配列に値を入れます。
.map() の使い方は以下のドキュメントを参考にしてみてください。

セレクトボックス(単一)

option要素に目もくれず、select要素の値を取れば終わりです。

HTML

JavaScript

もし This is B の部分を取ってきたい場合は以下のJavaScriptでいけます。

セレクトボックス(複数)

複数だからまたループするのかぁと思ってたら、今回は全てjQueryがやってくれます。なんて便利なんだjQuery。さすがだよ本当。
普通に .val() しましょう。

HTML

JavaScript

ちなみに何も選択されていないときは空の配列で返ってきます。注意しましょう。

フォーム要素全部

フォームの値を全て取ってくることも可能です。
form要素に対して、 .serialize() で送信すると、URLのGETみたいに URLの?以降の部分が取得出来ます。 .serializeArray() で取得すると配列に分解したものが取得出来ます。

HTML

JavaScript

一気にformの値を全て取りたいときはこっちのほうが絶対便利。
やっぱりjQueryって便利ですね。

この記事を読んでいるあなたにおすすめ!

少し古いですがjQueryの使い方の基本はこれを読んでおけば完璧です。

jQueryクックブック
jQueryクックブック

posted with amazlet at 12.09.06
jQuery Community Experts
オライリージャパン
売り上げランキング: 86232

更新情報はFacebookページで!

ブログの更新、読んで役立つ他ブログの記事などを更新しています。




関連のある記事


質問があればこちらからどうぞ