【JS】リセットボタン押下時にフォーム入力値・選択値をリセット、クリアする方法
2018/01/30
検索条件などをフォームに記述・選択後、GET方式で引き継いでいる時、HTMLにある普通のリセットボタンではデータは初期化されません。
そこで、jQueryを使ってデータを初期化するというイメージのスクリプトを作ってみましたのでご紹介。
リセットボタンの押下で、入力済内容を初期化するスクリプト
作成したシステムの検索画面などで活躍している小技。
結果閲覧中に、検索条件などをクリアして初期表示画面に戻したい場合などに使えます。
イメージ
リセットボタン押下で、既にフォームなどにある条件をクリアします。
各種コード
HTML
単なるリセットボタンです。
|
1 |
<button type="submit" class="reset">リセット</button> |
JS
ヘッダにでも記述して下さい。
|
1 2 3 4 5 6 |
$(function(){ // 入力値をリセット $("button.reset").click(function(){ $('input[type="text"], input[type="radio"], input[type="checkbox"], select').val("").removeAttr('checked').removeAttr('selected'); }) }); |
軽く説明すると、リセットボタンのクリックで、ページ内の各フォームのパターンに対し、内容、選択値をクリア、空白設定しているだけです。
なるほどね！ という感じ。
今なら何をやっているのかがよく分かります。
レベルアップを実感中。