[jQuery]フォームの入力選択情報をリセットするボタンの作り方

Javascriptスニペット

2014.01.082015.01.21

テキストフィールドに入力した文字や、プルダウンメニュー（select）で選択した項目などを、ボタン1クリックでリセットして初期状態に戻す方法のご紹介です。

jQueryを使って実装できますので、企業サイトのお問い合わせメールフォームでも使えると思います。

jQueryでフォームのリセット
リセットさせる項目を追加

jQueryでフォームのリセット

jqueryファイルと一緒に、【jQuery】formのリセットをで3行で書いてみるの記事で紹介されているコードを<head>内などに追加します。

<script src="./jquery.min.js"></script>
<script>
$(document).ready(function(){
	$(".clearForm").bind("click", function(){
		$(this.form).find("textarea, :text, select").val("").end().find(":checked").prop("checked", false);
	});
});
</script>

$(document).ready(function(){

$(".clearForm").bind("click", function(){

$(this.form).find("textarea, :text, select").val("").end().find(":checked").prop("checked", false);

});

</script>

続いてHTMLファイル側で、フォームの下部に以下のようなリセットボタンを設置します。

<form>
<input class="clearForm" type="button" value="リセット">
</form>

<form>

</form>

.clearForm クラスのinputタグをクリックする事で、フォーム内の入力されたテキストなどがリセットされます。

リセットさせる項目を追加

以下のコードの5行目のように、ラジオボタンやチェックボックスもリセットできように記述を追加してみます。

<script src="./jquery.min.js"></script>
<script>
$(document).ready(function(){
	$(".clearForm").bind("click", function(){
		$(this.form).find("textarea, :text, select, radio, checkbox").val("").end().find(":checked").prop("checked", false);
	});
});
</script>