今回は、form関連のタグをjQueryで取得する方法を書いていこうと思います。
正直、クラスやIDをつければ、取得するのは難しくありません。
ただそれには、自分が作ったform、もしくは自分でHTMLへ記述を加えることができるformに限られてきます。
実務では、formに手を加えられない案件もあります。
今回の方法は、上記のようにHTMLへ手が加えることができないときに、使える方法となっています。
- jQueryを使ってフォームのタグ（入力フィールドやボタン）の値を取得する方法
- val()メソッドを使用してフォーム要素から値を取得する方法
- フォームのinput、select、textareaなど、異なるフォーム要素の値取得方法
- 実際のコード例を通じて、フォームデータを取得する方法
inputタグのtype別の取得。
それでは、まずinputタグから書いていきます！
inputタグには、以下のような種類があります。
- テキスト
- ファイル
- パスワード
- チェックボックス
- ラジオボタン
これら全て、クラスやIDがなくても取得することができます。
| inputタグのtype | 取得方法 |
| type=”text” | $(‘input:text’); |
| type=”file” | $(‘input:file’); |
| type=”password” | $(‘input:password’); |
| type=”checkbox” | $(‘input:checkbox’); |
| type=”radio” | $(‘input:radio’); |
もちろん、親要素を指定しての指定も可能です。
<form class="form-text">
<input type="radio">
</form>$('.form-test input:radio');
$('#form-test input:radio');要素の状態別の取得。
要素によっては、状態を指定して取得することができます。
| タブ | 取得方法 | 説明 |
| <selsect></selsect> | $(‘select:selected’); | セレクトタブの選択中の要素を取得する。 |
| <input type=”checkbox”> | $(‘input:checkbox:checked’); | チェックされた全てを取得する。$(‘input:checked’);だと、inputのラジオボタンも含まれてしまう。 |
| <input type=”radio”> | $(‘input:radio:checked’); | チェックされた全てを取得する。$(‘input:checked’);だと、inputのチェックボックスも含まれてしまう。 |
| <input type=”radio” name=”hoge”> | $(‘input[name=hoge]:checked’); | nameを使って、グループで絞って取得することもできる。 |
| 中身が空のタブを取得 | $(‘:empty’); | 上記のinput、radio同様に要素を特定して取得することも可能。 |
複数取得されるものは、配列として帰ってきますので、必要な値を取得するにはecheを使います。
//ラジオボタン、チェックボックスを対象にチェックされている要素を全て取得。
$('input:checked').each(function(){
//ひとつずつをコンソールに出力する。
console.log($(this).text());
});
複雑なフォームの値取得方法！
複数のチェックボックスやラジオボタンがあるフォームから、選択された値をすべて取得する方法を紹介します。
// チェックされたチェックボックスの値を取得
$("input[name='options']:checked").each(function() {
console.log($(this).val());
});
// 選択されたラジオボタンの値を取得
let selectedRadio = $("input[name='group1']:checked").val();
console.log("選択されたラジオボタンの値: " + selectedRadio);
上記を応用することで、動的なフォーム操作が可能になります！
以上、応用編でした。
jQueryのform関連タグをIDやクラスに依存せずに取得する。
以上、使用頻度の高そうなものをまとめてみました！
上記の方法を使えば、比較的簡単にIDやクラスに依存せずに取得できます。
他にも活用できそうなコードを見つけたら、更新して追記していきます！