【JS】複数のフォームに同じ値を入力するスクリプトをjQueryで作ってみた
2013/06/05
今回も小技。
都道府県別の送料を指定するフォームに、一律料金として全て同じ数値を入力する場合などを想定。
一瞬どうやるんだっけ？ ってなったので、次使う場合用の忘備録としてポストしておきます。
複数のフォームに同じ値を入力するスクリプト
HTML
ではまず、htmlから。
反映させる金額をセットするフォームとボタンがあり、次にテーブルに都道府県名とフォームがある、一般的なHTML。
テーブル自体にIDを指定しておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<p>※全国一律送料 : <input type="text" name="same_cost" id="sameCost" size="10" maxlength="5" />円に設定する。 <input type="button" name="same_cost_button" value="反映" id="sameCostButton"></p> <table border="0" cellpadding="5" cellspacing="0" id="deviveryCostForm"> <tr> <th>(1) 北海道</th> <td><input type="text" name="cost1" value="" id="cost1" /> 円</td> <th>(2) 青森県</th> <td><input type="text" name="cost2" value="" id="cost2" /> 円</td> </tr> </table> |
JS
では、スクリプト。
めっちゃ単純。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript"> $(function(){ $('#sameCostButton').click(function(){ var deliveryCost = $('#sameCost').val(); // 一律送料 // 数字判定 if (!isNaN(deliveryCost)) { $("#deviveryCostForm input").val(deliveryCost); } }); }); </script> |
一応、一律の料金として入力された値が数値かどうかのチェックだけ行なっています。
数値なら反映し、違ったら何もしない仕様としています。
for文版
同じ様なスクリプトは、for文を使って書くことが可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script type="text/javascript"> $(function(){ $('#sameCostButton').click(function(){ var deliveryCost = $('#sameCost').val(); // 一律送料 var target; // 数字判定 if (!isNaN(deliveryCost)) { for (i=1; i<=47; i++) { target = "input#DeliveryCost"+i; $(target).val(deliveryCost); } } }); }); </script> |