Writing /volume1/Web/Public/dokuwiki/data/log/deprecated/2024-11-15.log failed
Clear form using jquery
jqueryを利用しFormのフィールドを初期化する方法を紹介する。 前提として、初期化するフィールドは以下に示す。
- input text
- select
- check box
- radio button
- textarea
除外するフィールドを以下に示す。
- button
- input hidden
- submit
- reset
まず、デモを見ながら動作を確認してみよう。
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コードを次に示す。
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以降 } }
ここで、removeAttr(“selected”)だけでは初期値に戻すことができないので、先頭のものを選択する処理を追加している。
因みに、.not(“input[readonly='true']”)は読取り専用フィールドを除外する処理だけど、IEとFFで挙動が違う。
詳細は下で説明する。
browser issue for readonly field
IEでreadonlyフィルターが効くのはreadonly='true'である。
FFでreadonlyフィルターが効くのはreadonly='readonly'である。
ただし、readonlyのみ書いてある場合はreadonly=''で書かないと認識ができない。
ブラウザことに挙動が違うので、確実な方法はnameで指定するのが最善だと思う。もっとスマートな方法はないのかな？？
コメント