jQueryによるフォームデータ取得方法のまとめ: 小粋空間

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

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

Posted at July 6,2011 3:55 AM
Tag：[jQuery]

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

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

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

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

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

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

セレクトボックスの値を変更したときに取得するには、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>

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

フォーム送信時にセレクトボックスの値を取得するには、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();
…後略…

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

ラジオボタンの値を変更したときに取得するには、セレクトボックス同様、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>

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

フォーム送信時にセレクトボックスの値を取得するには、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();
…後略…

５．チェックボックスをチェックしたときに実行

チェックボックスの値を変更したときに取得するには、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>

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

フォーム送信時にチェックボックスの値を取得するには、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>

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

フォーム送信時にテキストフィールドの値を取得するには、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>

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

フォーム送信時にテキストエリアの内容を取得するには、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>