• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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>


続いて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 を利用したフォームのリセットボタンのデモ




  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください