| 両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン |
| study:javascript:jquery:clear-form [2011/03/28 08:44] – [Clear form using jQuery] banana | study:javascript:jquery:clear-form [2017/11/28 04:26] (現在) – [code snippet] banana |
|---|
| ====== Clear form using jQuery ====== | ====== Clear form using jquery ====== |
| jQueryを利用しFormのフィールドを初期化する方法を紹介する。 | jqueryを利用しFormのフィールドを初期化する方法を紹介する。 |
| 前提として、初期化するフィールドは以下に示す。 | 前提として、初期化するフィールドは以下に示す。 |
| * input text | * input text |
| まず、デモを見ながら動作を確認してみよう。 | まず、デモを見ながら動作を確認してみよう。 |
| ===== demo ===== | ===== demo ===== |
| | <html> |
| | <head> |
| | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
| | <title>demo page for form reset using jQuery</title> |
| | |
| | <script type="text/javascript" src="./test/js/jquery-1.4.2.js"></script> |
| | |
| | <script type="text/javascript"> |
| | function clearForm(){ |
| | if(confirm('データをクリアにしてよろしいですか？')){ |
| | //readonly='true'(IE) readonly='readonly'(FF) |
| | $("input[type='text'], textarea").not("input[readonly='true'], :hidden, :button, :submit, :reset").val(""); |
| | $("input[type='radio'], input[type='checkbox'], select").removeAttr("checked").removeAttr("selected"); |
| | $("select option:first-child").attr("selected", "selected"); |
| | } |
| | } |
| | </script> |
| | |
| | <style type="text/css"> |
| | |
| | </style> |
| | |
| | </head> |
| | <body> |
| | <form name="data_entry" id="data_entry_frm" action="#"> |
| | <input type="hidden" name="@param1" value="val1"/> |
| | <input type="hidden" name="@param2" value="val2"/> |
| | <input type="hidden" name="@param3" value="val3"/> |
| | <table cellspacing="5" cellpadding="0"> |
| | <tr> |
| | <td><label for="company_name">text field: </label></td> |
| | <td><input type="text" size="35" maxlength="70" name="company_name" id="txt_company_name"></td> |
| | </tr> |
| | <tr> |
| | <td><label for="business_category">radio button: </label></td> |
| | <td><input type="radio" name="business_category" value="1" id="rad_business_category_1">Manufacturer</td> |
| | </tr> |
| | <tr> |
| | <td> </td> |
| | <td><input type="radio" name="business_category" value="2" id="rad_business_category_2">Whole Sale Supplier</td> |
| | </tr> |
| | <tr> |
| | <td> </td> |
| | <td><input type="radio" name="business_category" value="3" id="rad_business_category_3">Retailer</label> |
| | </tr> |
| | <tr> |
| | <td> </td> |
| | <td><input type="radio" name="business_category" value="4" id="rad_business_category_4">Service Provider</td> |
| | </tr> |
| | <tr> |
| | <td><label for="email">text field(default): </label></td> |
| | <td><input type="text" size="50" maxlength="70" name="email" id="txt_email" value="support@nsk.com"></td> |
| | </tr> |
| | <tr> |
| | <td><label for="hobby">text field(readonly): </label></td> |
| | <td><input type="text" size="15" maxlength="70" name="email" id="txt_email" value="iphone" readonly></td> |
| | </tr> |
| | <tr> |
| | <td><label for="privacy">check box: </label></td> |
| | <td><input type="checkbox" name ="privacy" id="chk_privacy"></td> |
| | </tr> |
| | <tr> |
| | <td><label for="address">select one(default): </label></td> |
| | <td><select name="address"> |
| | <option value="1">東京都</option> |
| | <option value="2">大阪府</option> |
| | <option value="3" selected="selected">福島県</option> |
| | <option value="4">宮城県</option> |
| | <option value="5">静岡県</option> |
| | </select></td> |
| | </tr> |
| | <tr> |
| | <td><label for="sex">select one: </label></td> |
| | <td><select name="sex"> |
| | <option value="1">男性</option> |
| | <option value="2">女性</option> |
| | </select></td> |
| | </tr> |
| | <tr> |
| | <td><label for="etc">text area: </label></td> |
| | <td><textarea name="etc" col="40" row="5"></textarea></td> |
| | </tr> |
| | <tr> |
| | <td><input type="button" name="clear" value="Clear Form" onclick="clearForm();" ></td> |
| | <td><input type="button" name="reset_form" value="Reset Form" onclick="this.form.reset();"></td> |
| | </tr> |
| | </table> |
| | |
| | </form> |
| | |
| | </body> |
| | </html> |
| | |
| | ===== code snippet ===== |
| | フォームを初期化するjqueryコードを次に示す。 |
| | <code javascript> |
| | function clearForm(){ |
| | if(confirm('データをクリアにしてよろしいですか？')){ |
| | $("input[type='text'], textarea").not("input[readonly='true'], input[type='hidden'], :button, :submit, :reset").val(""); |
| | $("input[type='radio'], input[type='checkbox'], select").removeAttr("checked").removeAttr("selected"); |
| | $("select option:first-child").attr("selected", "selected"); // 1.6以前のバージョン |
| | $("select").prop("selectedIndex", "0"); // 1.6以降 |
| | } |
| | } |
| | </code> |
| | ここで、**removeAttr("selected")**だけでは初期値に戻すことができないので、先頭のものを選択する処理を追加している。\\ |
| | 因みに、**.not("input[readonly='true']")**は読取り専用フィールドを除外する処理だけど、IEとFFで挙動が違う。\\ |
| | 詳細は下で説明する。 |
| | ===== browser issue for readonly field ===== |
| | IEで**readonly**フィルターが効くのは**readonly='true'**である。\\ |
| | FFで**readonly**フィルターが効くのは**readonly='readonly'**である。\\ |
| | ただし、**readonly**のみ書いてある場合は**readonly=''**で書かないと認識ができない。\\ |
| | ブラウザことに挙動が違うので、確実な方法は**name**で指定するのが最善だと思う。もっとスマートな方法はないのかな？？ |
| | ~~DISCUSSION~~ |
| | |
| | |
| |
