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:50] – [demo] bananastudy:javascript:jquery:clear-form [2017/11/28 04:26] (現在) – [code snippet] banana
行 19: 行 19:
 <title>demo page for form reset using jQuery</title> <title>demo page for form reset using jQuery</title>
  
-<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" /> +<script type="text/javascript" src="./test/js/jquery-1.4.2.js"></script>
- +
-<script src="../jquery-1.5.1.min.js" type="text/javascript"></script>+
  
 <script type="text/javascript"> <script type="text/javascript">
行 40: 行 38:
 </head> </head>
 <body> <body>
-  
- <h1>Form reset example</h1> 
-  
  <form name="data_entry" id="data_entry_frm" action="#">  <form name="data_entry" id="data_entry_frm" action="#">
  <input type="hidden" name="@param1" value="val1"/>  <input type="hidden" name="@param1" value="val1"/>
行 70: 行 65:
     <tr>     <tr>
     <td><label for="email">text field(default): </label></td>     <td><label for="email">text field(default): </label></td>
-    <td><input type="text" size="15" maxlength="70" name="email" id="txt_email" value="support@nsk.com"></td>+    <td><input type="text" size="50" maxlength="70" name="email" id="txt_email" value="support@nsk.com"></td>
     </tr>     </tr>
     <tr>     <tr>
行 110: 行 105:
  
 </body> </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~~
  
  
  
-</html> 

トレース:

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