Writing /volume1/Web/Public/dokuwiki/data/log/deprecated/2024-11-15.log failed

現在位置: start » study » javascript » jquery » clear-form

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

次のリビジョン		前のリビジョン
study:javascript:jquery:clear-form [2011/03/28 08:43] – created bananastudy:javascript:jquery:clear-form [2017/11/28 04:26] (現在) – [code snippet] banana
行 1: 行 1:
-====== Clear form using jQuery ====== +====== Clear form using jquery ====== 
-jQueryを利用しFormのフィールドを初期化する方法を紹介する。+jqueryを利用しFormのフィールドを初期化する方法を紹介する。
 前提として、初期化するフィールドは以下に示す。 前提として、初期化するフィールドは以下に示す。
-  - input text +  * input text 
-  - select +  * select 
-  - check box +  * check box 
-  - radio button +  * radio button 
-  - textarea+  * textarea
 除外するフィールドを以下に示す。 除外するフィールドを以下に示す。
-  - button +  * button 
-  - input hidden +  * input hidden 
-  - submit +  * submit 
-  - reset+  * reset
 まず、デモを見ながら動作を確認してみよう。 まず、デモを見ながら動作を確認してみよう。
 ===== 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>&nbsp;</td>
 +    <td><input type="radio" name="business_category" value="2" id="rad_business_category_2">Whole Sale Supplier</td>
 +    </tr>
 +    <tr>
 +    <td>&nbsp;</td>
 +    <td><input type="radio" name="business_category" value="3" id="rad_business_category_3">Retailer</label>
 +    </tr>
 +    <tr>
 +    <td>&nbsp;</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~~
 +
 +
  

トレース:

QR Code
QR Code study:javascript:jquery:clear-form (generated for current page)