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>

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>

</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コードを次に示す。

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で指定するのが最善だと思う。もっとスマートな方法はないのかな？？

目次

Clear form using jquery

demo

code snippet

browser issue for readonly field