[解決済み] jQueryで多段式フォームをリセットする
質問内容
私は、以下のようにコード化された標準的なリセットボタンがあるフォームを持っています。
<input type="reset" class="button standard" value="Clear" />
問題は、このフォームが多段式であるため、ユーザーがステージ&スタンプを入力し、後で戻ってきた場合、クリアボタンをクリックしても、さまざまなフィールドの「記憶された」値はリセットされないということです。
すべてのフィールドをループして「手動で」クリアするjQuery関数を添付すれば、うまくいくのではないかと考えています。すでにフォーム内でjQueryを使用していますが、スピードアップしているところなので、IDで各フィールドを個別に参照する以外にどのような方法があるのかわかりません。
よろしくお願いします。
解決方法は?
2012年3月に更新しました。
この質問に最初に答えてから2年後、私はこの質問がかなり大混乱になっていることを確認しました。私の回答は、最も多くのアップヴォートされ、受け入れられているので、そろそろ戻って、本当に正しい回答にする時期だと感じています。
しかし、この質問は、この方法でフォームをリセットした場合にフォームに残る記憶された値を消去しようとしているのです。そのため、手動でのリセットが必要なのです。ほとんどの人がGoogle検索でこの質問にたどり着き、本当にreset()メソッドを探していると思いますが、OPが話しているような特定のケースでは機能しません。
私の オリジナル の答えはこれでした。
// not correct, use answer below
$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
しかし、コメントや他の回答で指摘されているように、radio/checkbox要素からvalue属性を取り除くことになります。
さらに 正しい の答えです(ただし、完璧ではありません)。
function resetForm($form) {
$form.find('input:text, input:password, input:file, select, textarea').val('');
$form.find('input:radio, input:checkbox')
.removeAttr('checked').removeAttr('selected');
}
// to call, use:
resetForm($('#myform')); // by id, recommended
resetForm($('form[name=myName]')); // by name
を使用することで
:text
,
:radio
などのセレクタを単独で使用することは、jQueryではバッドプラクティスとみなされています。
*:text
そのため、必要以上に時間がかかってしまいます。私はホワイトリストのアプローチを好みますし、私の最初の回答でもそれを使っていればよかったと思います。いずれにせよ
input
の部分と、form 要素のキャッシュを使用することで、この回答は最高のパフォーマンスを発揮するはずです。
この回答は、select要素のデフォルトが空白の値を持つオプションでない場合、まだいくつかの欠点があるかもしれません。しかし、この回答は限りなく一般的であり、これはケースバイケースで処理する必要があります。
関連
-
[解決済み] jQueryのpreventDefault()が発動しない
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] jQuery UI DatePicker - 日付フォーマットの変更
-
[解決済み] jQueryを使用してDropDownListの値を設定するにはどうすればよいですか?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] jQueryを使ったファイルのダウンロード
-
[解決済み] .prop() vs .attr()
-
[解決済み] jQueryのSELECT要素で特定のオプションを選択するにはどうすればよいですか?
-
[解決済み] jQueryでtextareaの値を設定する
-
[解決済み] Google Maps APIでマウスのスクロールホイールによる拡大縮小を無効にする方法
-
[解決済み] クリックボタンでクリップボードにコピー
-
[解決済み] jQueryでフォームフィールドをクリアする
-
[解決済み] jQuery OR Selector?
-
[解決済み】jQueryでRSSをパースする。
-
[解決済み] JavaScriptでフォームをリセット(クリア)するには?