344


140

このようにコーディングされた標準のリセットボタンを持つフォームがあります。


問題は、このフォームは多段階のソートであるため、ユーザーがステージに記入した場合です。

私は、すべてのフィールドをループ処理して「手動で」クリアするためにjQuery関数を添付することでうまくいくと考えています。 私はすでにフォーム内でjQueryを使用していますが、実際には速度が上がっているだけです。

どんな助けのためのTIA。

30 Answer


494


2012年3月に更新されました。

それで、私が最初にこの質問に答えた2年後に、私はそれがほとんど大きな混乱に変わったことを確かめるために戻ってきます。 私はそれが私がそれに戻って来て、それが最も支持されていると受け入れられているので私の答えを本当に正しいようにする時間についてだと感じます。

その記録については、Titiの答えは原作のポスターが要求したものではないので間違っています - ネイティブreset()メソッドを使ってフォームをリセットすることは可能ですが、この質問は覚えていないフォームをクリアしようとしているこの方法でリセットした場合にフォームに残る値。 これが「手動」リセットが必要な理由です。 私はほとんどの人がGoogleの検索からこの質問にたどり着き、本当にreset()メソッドを探していると思いますが、OPが話している特定のケースではうまくいきません。

私の*元の*答えはこれでした:

// 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`などを使う セレクタ自体はjQueryでは悪い結果と見なされています。それらは結局 `*:text`に評価されるため、必要以上に時間がかかるからです。 私はホワイトリストアプローチを好むし、私の最初の答えでそれを使ったことを望みます。 とにかく、セレクタの `input`部分とform要素のキャッシュを指定することによって、これはここで最もパフォーマンスの良い答えになるはずです。

select要素のデフォルトが空白値を持つオプションではない場合、この回答にはまだいくつかの問題があるかもしれませんが、確かにそれは一般的であり、ケースバイケースで処理する必要があります。


390


$('#myform')[0].reset();

このような入力がある場合、 `myinput.val( '')`を設定しても「リセット」100%をエミュレートできない場合があります。


例えば、デフォルト値50で入力に対して `myinput.val( '')`を呼び出すと空の文字列に設定されますが、 `myform.reset()`を呼び出すと初期値の50にリセットされます。


48


パオロの受け入れられた答えには大きな問題があります。 検討してください:

$(':input','#myform')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');
  • .val( '') *行はまたチェックボックスとラジオボタンに割り当てられたすべての `value`をクリアします。 だから(私のように)あなたがこのような何かをするなら:


受け入れられた答えを使うことはあなたの入力を次のように変えるでしょう。


おっと - 私はその値を使っていました!

これは、チェックボックスとラジオの値を保持する修正版です。

// Use a whitelist of fields to minimize unintended side effects.
$('INPUT:text, INPUT:password, INPUT:file, SELECT, TEXTAREA', '#myFormId').val('');
// De-select any checkboxes, radios and drop-down menus
$('INPUT:checkbox, INPUT:radio', '#myFormId').removeAttr('checked').removeAttr('selected');


15


  • jQueryプラグイン*

必要な場所ならどこでも簡単に使えるようにjQueryプラグインを作成しました。

jQuery.fn.clear = function(){var $ form = $(this);

$ form.find( '入力:テキスト、入力:パスワード、入力:ファイル、テキストエリア')。val( ''); $ form.find( '選択オプション:選択')。removeAttr( '選択'); $ form.find( 'input:checkbox、input:radio')。removeAttr( 'checked');

これを返してください。 ;

だから今私は呼び出すことでそれを使用することができます:

$( '#my-form')。clear();


14


フォームをクリアするのは少しトリッキーで、見た目ほど単純ではありません。

http://malsup.com/jquery/form/[jQueryフォームプラグイン]を使用し、そのhttp://malsup.com/jquery/form/#code-samples[_clearForm_または_resetForm_]機能を使用することをお勧めします。 それはコーナーケースの大部分を引き受けます。


14


document.getElementById( 'frm')。reset()


13


私は通常します:

$( '#formDiv form')。get(0).reset()

または

$( '#formId')。get(0).reset()


5


http://docs.jquery.com/Plugins/Validation/Validator[validation plugin]の使用を検討してください - それは素晴らしいことです! そしてフォームの再設定は簡単です:
var validator = $( "#myform")。validate(); validator.resetForm();


4


基本的に提供されているソリューションのどれもが私を幸せにします。 何人かの人々が指摘したように、彼らはそれをリセットする代わりにフォームを空にする。

ただし、役立つJavaScriptプロパティがいくつかあります。

  • テキストフィールドのdefaultValue

  • チェックボックスとラジオボタンはdefaultChecked

  • default選択オプションとして選択

これらはページがロードされたときにフィールドが持っていた値を格納します。

jQueryプラグインを書くのは簡単です:(せっかちな人のために…​ これがデモです。http://jsfiddle.net/kritzikratzi/N8fEF/1/)

プラグインコード

(function( $ ){
    $.fn.resetValue = function() {
        return this.each(function() {
            var $this = $(this);
            var node = this.nodeName.toLowerCase();
            var type = $this.attr( "type" );

            if( node == "input" && ( type == "text" || type == "password" ) ){
                this.value = this.defaultValue;
            }
            else if( node == "input" && ( type == "radio" || type == "checkbox" ) ){
                this.checked = this.defaultChecked;
            }
            else if( node == "input" && ( type == "button" || type == "submit" || type="reset" ) ){
                // we really don't care
            }
            else if( node == "select" ){
                this.selectedIndex = $this.find( "option" ).filter( function(){
                    return this.defaultSelected == true;
                } ).index();
            }
            else if( node == "textarea" ){
                this.value = this.defaultValue;
            }
            // not good... unknown element, guess around
            else if( this.hasOwnProperty( "defaultValue" ) ){
                this.value = this.defaultValue;
            }
            else{
                // panic! must be some html5 crazyness
            }
        });
    }
} )(jQuery);

使用法

// reset a bunch of fields
$( "#input1, #input2, #select1" ).resetValue();

// reset a group of radio buttons
$( "input[name=myRadioGroup]" ).resetValue();

// reset all fields in a certain container
$( "#someContainer :input" ).resetValue();

// reset all fields
$( ":input" ).resetValue();

// note that resetting all fields is better with the javascript-builtin command:
$( "#myForm" ).get(0).reset();

いくつかのメモ…​

  • 私は新しいhtml5フォーム要素を調べていません。 特別な扱いですが、同じ考えが機能するはずです。

  • 要素は直接参照する必要があります。 i.e. `$(" #container ").resetValue()`は機能しません。 代わりに常に `$(" #container:input ")`を使ってください。

  • 上記のように、ここにデモがあります: http://jsfiddle.net/kritzikratzi/N8fEF/1/


4


あなたはこれがjQueryなしで実際にもっと簡単に解決されることを見つけるかもしれません。

通常のJavaScriptでは、これは次のように簡単です。

document.getElementById( 'frmitem')。reset();

私たちは、コーディングを強化しスピードアップするためにjQueryを使っていますが、実際にはそれほど速くないことを常に覚えています。 そのような場合は、他の方法を使用することをお勧めします。