次のようにコード化された標準リセット ボタンを含むフォームがあります。
<input type="reset" class="button standard" value="Clear" />
問題は、このフォームが複数段階のフォームであるため、ユーザーが 1 つの段階に入力して後で戻ってきた場合、「クリア」ボタンをクリックしても、さまざまなフィールドの「記憶された」値がリセットされないことです。
jQuery 関数をアタッチしてすべてのフィールドをループし、それらを「手動で」クリアするとうまくいくのではないかと考えています。フォーム内ではすでに jQuery を使用していますが、まだ使い始めたばかりなので、各フィールドを ID で個別に参照する以外に、これをどのように進めればよいかわかりません。これはあまり効率的ではないようです。
何かお手伝いできることがありましたら、どうぞよろしくお願いいたします。
ベストアンサー1
2012年3月に更新されました。
それで、私が最初にこの質問に答えてから 2 年経って、戻ってみると、かなり混乱した状況になっていることに気づきました。この質問が最も多くの賛成票と承認を得ているので、そろそろ戻って私の回答を本当に正しいものにすべき時だと感じています。
記録のために言うと、Titi の回答は間違っています。元の投稿者が求めていたものではないからです。ネイティブの reset() メソッドを使用してフォームをリセットできるというのは正しいのですが、この質問は、この方法でリセットした場合にフォームに残る記憶された値をフォームから消去しようとしています。これが「手動」リセットが必要な理由です。ほとんどの人は Google 検索からこの質問に行き着き、本当に reset() メソッドを探しているのだと思いますが、このメソッドは投稿者が話している特定のケースでは機能しません。
私の最初の答えはこうでした:
// not correct, use answer below
$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
これは、OP の場合も含め、多くの場合に機能する可能性がありますが、コメントや他の回答で指摘されているように、ラジオ/チェックボックス要素からすべての値属性がクリアされます。
より正確な答え（ただし完璧ではありません）は次のとおりです。
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などのセレクターを単独で使用することは、 と評価され*:text、必要以上に時間がかかるようになるため、jQuery では悪い習慣とみなされます。私はホワイトリスト アプローチの方が好みなので、元の回答でそれを使用していればよかったと思います。いずれにせよ、inputセレクターの一部とフォーム要素のキャッシュを指定することにより、これがここでの最もパフォーマンスの高い回答になるはずです。
選択要素のデフォルトが空白値を持つオプションではない場合、この回答にはまだ欠陥がある可能性がありますが、これは確かに最も一般的な回答であり、ケースバイケースで処理する必要があります。