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

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

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

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のバージョンアップにともない、チェックボックスの記述を修正しました。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)