jQueryを使用したマルチステージフォームのリセット

このようにコード化された標準のリセットボタンを備えたフォームがあります。

<input type="reset" class="button standard" value="Clear" />

問題は、フォームがマルチステージソートであるため、ユーザーがステージに入力して後で戻った場合、[クリア]ボタンをクリックしても、さまざまなフィールドの「記憶された」値がリセットされないことです。

jQuery関数をアタッチしてすべてのフィールドをループし、それらを「手動」でクリアするとうまくいくと思います。私はすでにフォーム内でjQueryを使用していますが、速度を上げているだけです。そのため、IDで各フィールドを個別に参照する以外は、どうすればよいかわかりません。これはあまり効率的ではないようです。

TIAのヘルプ。

2012年3月に更新。

それで、私が最初にこの質問に答えてから2年後、私はそれがかなり大きな混乱に変わったことを確認しました。私がそれに戻って、正解を正解するときが来たと感じています。

ちなみに、元の投稿者が要求したものではないため、ティティの答えは間違っています-ネイティブの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セレクターの一部とフォーム要素のキャッシュを指定することで、ここでのパフォーマンスが最も良くなるはずです。

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

http://groups.google.com/group/jquery-dev/msg/2e0b7435a864beeaから：

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

次のmyinput.val('')ような入力がある場合、設定は「リセット」を100％エミュレートしない可能性があります。

<input name="percent" value="50"/>

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

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

$(':input','#myform')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');

この.val('')行はvalue、チェックボックスとラジオボタンに割り当てられているもクリアします。したがって、（私のように）あなたがこのようなことをした場合：

<input type="checkbox" name="list[]" value="one" />
<input type="checkbox" name="list[]" value="two" checked="checked" />
<input type="checkbox" name="list[]" value="three" />

受け入れられた回答を使用すると、入力が次のように変換されます。

<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" 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');

jQueryプラグイン

jQueryプラグインを作成したので、必要な場所で簡単に使用できます。

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

    $form.find('input:text, input:password, input:file, textarea').val('');
    $form.find('select option:selected').removeAttr('selected');
    $form.find('input:checkbox, input:radio').removeAttr('checked');

    return this;
}; 

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

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

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

あなたが使用することをお勧めjQueryのフォームプラグインを、その使用clearFormまたはresetForm 機能を。これは、ほとんどのコーナーケースを処理します。

document.getElementById（ 'frm'）。reset（）

私は通常：

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

または

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

ここにあなたを始めるためのものがあります

$('form') // match your correct form 
.find('input[type!=submit], input[type!=reset]') // don't reset submit or reset
.val(''); // set their value to blank

もちろん、チェックボックス/ラジオボタンがある場合は、これも変更してそれらを含め、設定する必要があります。 .attr({'checked': false});

編集 Paoloの答えはより簡潔です。私は:inputセレクタについて知らなかったため、また単にチェックされた属性を削除することを考えなかったので、私の答えはもっと冗長です。

検証プラグインの使用を検討してください-素晴らしいです！フォームのリセットは簡単です：

var validator = $("#myform").validate();
validator.resetForm();

これはうまくいくと思います。

$(":input").not(":button, :submit, :reset, :hidden").each( function() {
    this.value = this.defaultValue;     
});

基本的に、提供されているソリューションはどれも私を幸せにしません。数人の人が指摘したように、フォームをリセットするのではなく空にします。

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

• テキストフィールドのdefaultValue
• チェックボックスとラジオボタンのdefaultChecked
• 選択オプションのdefaultSelected

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

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フォーム要素を調べていません。特別な処理が必要なものもありますが、同じアイデアでうまくいくはずです。
• 要素は直接参照する必要があります。つまり$( "#container" ).resetValue()動作しません。常に$( "#container :input" )代わりに使用してください。
• 上記のように、ここにデモがあります：http : //jsfiddle.net/kritzikratzi/N8fEF/1/

これは、jQueryを使用しなくても実際には簡単に解決できることに気付くでしょう。

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

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

私は、jQueryを使用してコーディングを強化および高速化している間は、実際には高速ではないことを常に思い出すようにしています。これらの場合、別の方法を使用する方が良い場合がよくあります。

フランシスルイスの素敵な解決策を少し変えました。彼のソリューションでは、ドロップダウンの選択を空白に設定していません。（ほとんどの人が「クリア」したいとき、おそらくすべての値を空にしたいと思うでしょう。）これはで行い.find('select').prop("selectedIndex", -1)ます。

$.fn.clear = function()
{
    $(this).find('input')
            .filter(':text, :password, :file').val('')
            .end()
            .filter(':checkbox, :radio')
                .removeAttr('checked')
            .end()
        .end()
    .find('textarea').val('')
        .end()
    .find('select').prop("selectedIndex", -1)
        .find('option:selected').removeAttr('selected')
    ;
    return this;
};

通常、フォームに非表示のリセットボタンを追加します。必要なときだけ：$（ '＃reset'）。click（）;

$(document).ready()状況に対する最も投票された回答の変更：

$('button[type="reset"]').click(function(e) {
    $form = $(this.form);
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
    e.preventDefault();
});

次のjQuery Trigger eventように使用するだけです：

$('form').trigger("reset");

これにより、チェックボックス、ラジオボタン、テキストボックスなどがリセットされます。基本的に、フォームがデフォルトの状態になります。セレクターの#ID, Class, element内側に置くだけjQueryです。

これは私のために働きました、pyrotexの答えは選択されたフィールドをリセットしませんでした、彼を取りました、ここに私の編集があります：

// Use a whitelist of fields to minimize unintended side effects.
$(':text, :password, :file', '#myFormId').val('');  
// De-select any checkboxes, radios and drop-down menus
$(':input,select option', '#myFormId').removeAttr('checked').removeAttr('selected');
//this is for selecting the first entry of the select
$('select option:first', '#myFormId').attr('selected',true);

私はPaolo Bergantinoソリューションを使用しています。これは素晴らしいですが、微調整はほとんどありません...特に、IDの代わりにフォーム名を使用します。

例えば：

function jqResetForm(form){
   $(':input','form[name='+form+']')
   .not(':button, :submit, :reset, :hidden')
   .val('')
   .removeAttr('checked')
   .removeAttr('selected');
}

今私がそれを使いたいとき、できること

<span class="button" onclick="jqResetForm('formName')">Reset</span>

ご覧のとおり、これはどのフォームでも機能します。ボタンを作成するためにCSSスタイルを使用しているため、クリックしてもページが更新されません。もう一度Paoloに感謝します。唯一の問題は、フォームにデフォルト値があるかどうかです。

私は以下のソリューションを使用し、それが私のために機能しました（従来のjavascriptとjQueryを混合）

$("#myformId").submit(function() {
    comand="window.document."+$(this).attr('name')+".reset()";
    setTimeout("eval(comando)",4000);
})

私はPHPの中間者であり、JQueryのような新しい言語に飛び込むのは少し面倒ですが、以下はシンプルでエレガントなソリューションではありませんか？

<input name="Submit1" type="submit" value="Get free quote" />
<input name="submitreset" type="submit" value="Reset" />

目的が異なるだけで、2つの送信ボタンがない理由がわかりません。次に、単に：

if ($_POST['submitreset']=="Reset") {
$_source = "--Choose language from--";
$_target = "--Choose language to--"; }

値を再定義して、デフォルトが想定されているものに戻します。

かなり大きなフォーム（50以上のフィールド）で使用した方法は、フォームをAJAXでリロードし、基本的にサーバーにコールバックして、フィールドをデフォルト値で返すことでした。これにより、JSを使用して各フィールドを取得し、それをデフォルト値に設定するよりもはるかに簡単になります。また、サーバーのコードという1つの場所にデフォルト値を保持することもできました。このサイトでは、アカウントの設定に応じていくつかのデフォルトがあり、JSへの送信について心配する必要はありませんでした。私が対処しなければならない唯一の小さな問題は、AJAX呼び出しの後に初期化を必要とするいくつかの推奨フィールドでしたが、大した問題ではありませんでした。

これらの答えはすべて良好ですが、それを行う最も簡単な方法は、偽のリセットを使用することです。つまり、リンクとリセットボタンを使用します。

CSSを追加して、実際のリセットボタンを非表示にします。

input[type=reset] { visibility:hidden; height:0; padding:0;}

そして、あなたのリンクに次のように追加します

<a href="javascript:{}" onclick="reset.click()">Reset form</a>

<input type="reset" name="reset" id="reset" /><!--This input button is hidden-->

お役に立てれば！A.

<script type="text/javascript">
$("#edit_name").val('default value');
$("#edit_url").val('default value');
$("#edit_priority").val('default value');
$("#edit_description").val('default value');
$("#edit_icon_url option:selected").removeAttr("selected");
</script>

ここでは、チェックボックスと選択を更新します。

$('#frm').find('input:text, input:password, input:file, textarea').val('');
$('#frm').find('input:radio, input:checkbox').attr("checked",false).checkboxradio("refresh");
$('#frm').find('select').val('').selectmenu('refresh');

私も同じ問題を抱えていて、Paoloのポストが助けになりましたが、1つ調整する必要がありました。idがadvancedindexsearchのフォームには入力フィールドのみが含まれ、セッションから値を取得します。なんらかの理由で、次の方法ではうまくいきませんでした。

$("#advancedindexsearch").find("input:text").val("");

この後にアラートを設定すると、値が正しく削除されたのがわかりましたが、その後、値が再び置き換えられました。どのように、またはなぜかはまだわかりませんが、次の行でうまくいきました。

$("#advancedindexsearch").find("input:text").attr("value","");

パオロの答えは日付ピッカーを考慮していません、これを追加してください：

$form.find('input[type="date"]').val('');

パオロベルガンティーノの元の答えを少し改善しました

function resetFormInputs(context) {
    jQuery(':input', context)
    .removeAttr('checked')
    .removeAttr('selected')
    .not(':button, :submit, :reset, :hidden')
    .each(function(){
         jQuery(this).val(jQuery(this).prop('defautValue'));
    });
}

このようにして、任意のコンテキスト要素を関数に渡すことができます。フォーム全体または特定のフィールドセットのみをリセットできます。次に例を示します。

resetFormInputs('#form-id'); // entire form
resetFormInputs('.personal-info'); // only the personal info field set

さらに、入力のデフォルト値が保持されます。

これが私の解決策です。これは新しいhtml5入力タイプでも機能します。

/**
 * removes all value attributes from input/textarea/select-fields the element with the given css-selector
 * @param {string} ele css-selector of the element | #form_5
 */
function clear_form_elements(ele) {
    $(ele).find(':input').each(function() {
        switch (this.type) {
            case 'checkbox':
            case 'radio':
                this.checked = false;
            default:
                $(this).val('');
                break;
        }
    });
}

受け入れられた回答を補完するもので、SELECT2プラグインを使用する場合、select2スクリプトを呼び出して変更を加える必要があります。

function resetForm(formId){
        $('#'+formId).find('input:text, input:password, input:file, select, select2, textarea').val('');
        $('#'+formId).find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
        $('.select2').select2();
    }

$(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true);