[JS]jQuery でフォームの入力選択情報をリセットするボタンの作り方
スポンサード
続いてHTML ファイル側で、フォームの下部に以下のようなリセットボタンを設置します。
jQuery を利用したフォームのリセットボタンのデモ
スポンサード
テキストフィールドに入力した文字や、プルダウンメニュー(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 を利用したフォームのリセットボタンのデモ
スポンサード
コメント