jQueryでフォームのテキストやセレクト、ラジオボタンなどのvalueの値を取得したり、設定したい場合があります。
jQueryのval()を使用すれば、簡単に値を取得・設定することが可能です。
■ val()
指定したフォームのvalue属性を操作する際に使用します。
引数を指定した場合は値を設定し、valueの値を取得する場合は引数なしで呼び出します。
$("").val();
■ フォームの値を取得する
下記はボタン押下時にテキストに入力された値を取得する場合の処理です。
【jQuery】
1 2 3 4 5 6 7 8 9 10 11 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){ // ボタンをクリックした場合 $("#btn").click(function () { // フォームの値を取得 str = $("#hoge").val(); alert(str); });});</script> |
【HTML】
1 2 | <input type="text" name="hoge" id="hoge" value="" /><input type="button" id="btn" name="btn" value="取得" /> |
■ フォームの値を設定する
下記はボタン押下時にテキストに値を設定する場合の処理です。
【jQuery】
1 2 3 4 5 6 7 8 9 10 11 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){ // ボタンをクリックした場合 $("#btn").click(function () { var str = "設定する値"; // フォームの値を設定 $("#hoge").val(str); });});</script> |
【HTML】
1 2 | <input type="text" name="hoge" id="hoge" value="" /><input type="button" id="btn" name="btn" value="設定" /> |
選択した値によって別のフォームを変えたりできるので、色々な場面で便利です。