[JS]jQuery でフォームの入力選択情報をリセットするボタンの作り方｜Javascriptスニペット｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

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

スポンサード

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

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

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

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>

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

<form>
<input class="clearForm" type="button" value="リセット">
</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>

以下にjQuery を利用したフォームのリセットボタンのデモを設置しておりますので、合わせて確認してみてください。
jQuery を利用したフォームのリセットボタンのデモ

参考ページ
【jQuery】formのリセットをで3行で書いてみる

スポンサード