TopJavaScriptjQuery > 2011年7月
2011年7月 6日

jQueryによるフォームデータ取得方法のまとめ

July 6,2011 3:55 AM
Tag:[]
Permalink

jQueryによるフォームデータ取得方法のまとめです。

フォームデータの取得で分かりにくいのは、セレクトボックス・ラジオボタン・チェックボックスの3種類ではないかと思われます。本エントリーではこの3種類にターゲットを絞り、動作サンプルを用いて解説します。「$」は「jQuery」で記述しています。

2012.06.19追記:テキストフィールド・テキストエリアの取得方法も追加しました。

2014.05.11追記:チェックボックスの取得方法をattr()からprop()に変更しました。

ネットで検索したところ、まとまった記事がなかったので自作しました。なお、本エントリーに掲載している方法以外にも色々なやり方があると思いますので、一例として参照して頂ければ幸いです。

1.セレクトボックスの値を変更したときに取得

セレクトボックスの値を変更したときに取得するには、changeイベントとval()を組み合わせます。changeイベント内部ではthisが使えます。

サンプル

(X)HTML

<select id="foo" name="foo">
  <option value="aaa">aaa</option>
  <option value="bbb">bbb</option>
  <option value="ccc">ccc</option>
</select>

jQuery

<script>
jQuery(function() {
    jQuery('select#foo').change(function(){
        var data = jQuery(this).val();
        jQuery('#message').html('セレクトボックスの値は「' + data + '」です');
    });
});
</script>

2.フォーム送信時にセレクトボックスの値を取得

フォーム送信時にセレクトボックスの値を取得するには、submitイベントとval()を組み合わせます。submitイベント内部では「this+'option:selected'」で指定できます。

サンプル

(X)HTML

<form id="bar" name="bar">
  <select id="foo" name="foo">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
  </select>
  <input type="submit" value="submit" />
</form>

jQuery

<script>
jQuery(function() {
    jQuery('form#bar').submit(function(){
        var data = jQuery(this + 'option:selected').val();
        jQuery('#message').html('セレクトボックスの値は「' + data + '」です');
    });
});
</script>

ただし1フォーム内に複数のセレクトボックスがある場合、このコードの書き方ではthisが使えないので、次のようにselect要素のid属性値などを直接指定してください。

…前略…
var data1_1 = jQuery('#foo1 option:selected').val();
var data1_2 = jQuery('#foo2 option:selected').val();
…後略…

3.ラジオボタンを選択したときに実行

ラジオボタンの値を変更したときに取得するには、セレクトボックス同様、changeイベントとval()を組み合わせます。changeイベント内部ではthisが使えます。

サンプル

(X)HTML

<input type="radio" name="number" value="1" />1
<input type="radio" name="number" value="2" />2
<input type="radio" name="number" value="3" />3

jQuery

<script>
jQuery(function() {
    jQuery('input[name="number"]').change(function(){
        var data = jQuery(this).val();
        jQuery('#message').html('ラジオボタンの値は「' + data + '」です');
    });
});
</script>

4.フォーム送信時にラジオボタンの値をチェック

フォーム送信時にセレクトボックスの値を取得するには、submitイベントとval()を組み合わせます。submitイベント内部では「this+':checked'」で指定できます。

サンプル

(X)HTML

<form id="bar" name="bar">
  <input type="radio" name="number" value="1" />1
  <input type="radio" name="number" value="2" />2
  <input type="radio" name="number" value="3" />3
  <input type="submit" value="submit" />
</form>

jQuery

<script>
jQuery(function() {
    jQuery('form#bar').submit(function(){
        var data = jQuery(this + ':checked').val();
        jQuery('#message').html('ラジオボタンの値は「' + data + '」です');
    });
});
</script>

ただし1フォーム内に複数のセレクトボックスがある場合、このコードの書き方ではthisが使えないので、次のようにinput要素のname属性値などを直接指定してください。

…前略…
var data2_1 = jQuery('[name="number1"]:checked').val();
var data2_2 = jQuery('[name="number2"]:checked').val();
…後略…

5.チェックボックスをチェックしたときに実行

チェックボックスの値を変更したときに取得するには、changeイベントとprop()を組み合わせます。changeイベント内部ではthisが使えます。

注:attr()が使えるのは1.7までです。

サンプル

(X)HTML

<input type="checkbox" name="confirm" value="1" />confirm

jQuery

<script>
jQuery(function() {
    jQuery('input[name="confirm"]').change(function(){
        var data = jQuery(this).prop('checked');
        jQuery('#message').html('チェックボックスの値は「' + data + '」です');
    });
});
</script>

6.フォーム送信時にチェックボックスの状態をチェック

フォーム送信時にチェックボックスの値を取得するには、submitイベントとprop()を組み合わせます。

注:attr()が使えるのは1.7までです。

サンプル

(X)HTML

<form id="bar" name="bar">
  <input type="checkbox" name="confirm" value="1" />confirm
  <input type="submit" value="submit" />
</form>

jQuery

<script>
jQuery(function() {
    jQuery('form#bar').submit(function(){
        var data = jQuery('input[name="confirm"]').prop('checked');
        jQuery('#message').html('チェックボックスの値は「' + data + '」です');
    });
});
</script>

7.フォーム送信時にテキストフィールドの値を取得

フォーム送信時にテキストフィールドの値を取得するには、submitイベントとval()を組み合わせます。

サンプル

(X)HTML

<form id="bar" name="bar">
  <input type="text" name="text" value="foo" />
  <input type="submit" value="submit" />
</form>

jQuery

<script>
jQuery(function() {
    jQuery('form#bar').submit(function(){
        var data = jQuery('input[name="text"]').val();
        jQuery('#message').html('テキストフィールドの値は「' + data + '」です');
    });
});
</script>

8.フォーム送信時にテキストエリアの内容を取得

フォーム送信時にテキストエリアの内容を取得するには、submitイベントとval()を組み合わせます。

サンプル

(X)HTML

<form id="bar" name="bar">
  <textarea name="data"></textarea>
  <input type="submit" value="submit" />
</form>

jQuery

<script>
jQuery(function() {
    jQuery('form#bar').submit(function(){
        var data = jQuery('textarea[name="data"]').val();
        jQuery('#message').html('テキストエリアの値は「' + data + '」です');
    });
});
</script>

9.1項~8項のすべてを含んだサンプル

サンプル

2012.06.19
7項・8項を追加しました。

2014.5.11
jQueryのバージョンアップにともない、チェックボックスの記述を修正しました。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3