1. ホーム
  2. jquery

[解決済み] jQueryで多段式フォームをリセットする

2022-03-16 15:20:40

質問内容

私は、以下のようにコード化された標準的なリセットボタンがあるフォームを持っています。

<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要素のデフォルトが空白の値を持つオプションでない場合、まだいくつかの欠点があるかもしれません。しかし、この回答は限りなく一般的であり、これはケースバイケースで処理する必要があります。