Zurücksetzen eines mehrstufigen Formulars mit jQuery

Ich habe ein Formular mit einer Standard-Reset-Taste, die folgendermaßen codiert ist:

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

Das Problem ist, dass das Formular mehrstufig ist. Wenn also ein Benutzer eine Phase ausfüllt und später zurückkehrt, werden die gespeicherten Werte für die verschiedenen Felder nicht zurückgesetzt, wenn auf die Schaltfläche Löschen geklickt wird.

Ich denke, dass das Anhängen einer jQuery-Funktion, um alle Felder zu durchlaufen und sie 'manuell' zu löschen, den Trick tun würde. Ich verwende jQuery bereits im Formular, bin aber gerade erst auf dem neuesten Stand und bin mir daher nicht sicher, wie ich vorgehen soll, außer jedes Feld einzeln nach ID zu referenzieren, was nicht sehr effizient zu sein scheint.

TIA für jede Hilfe.

aktualisiert im März 2012.

Zwei Jahre, nachdem ich diese Frage ursprünglich beantwortet hatte, komme ich zurück und stelle fest, dass sie sich zu einem großen Durcheinander entwickelt hat. Ich denke, es ist an der Zeit, darauf zurückzukommen und meine Antwort wirklich richtig zu machen, da sie am besten bewertet und akzeptiert wird.

Für die Aufzeichnung ist Titis Antwort falsch, da es nicht das ist, wonach das Originalplakat gefragt hat - es ist richtig, dass es möglich ist, ein Formular mit der nativen Methode reset () zurückzusetzen, aber diese Frage versucht, ein Formular aus dem gespeicherten zu entfernen Werte, die im Formular verbleiben würden, wenn Sie es auf diese Weise zurücksetzen. Aus diesem Grund ist ein "manueller" Reset erforderlich. Ich gehe davon aus, dass die meisten Leute in dieser Frage von einer Google-Suche gelandet sind und wirklich nach der reset () -Methode suchen, aber sie funktioniert nicht für den speziellen Fall, über den das OP spricht.

Meine ursprüngliche Antwort war:

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

Dies funktioniert möglicherweise in vielen Fällen, einschließlich des OP, aber wie in den Kommentaren und in anderen Antworten ausgeführt, werden Radio- / Kontrollkästchenelemente aus allen Wertattributen entfernt.

Eine korrektere Antwort (aber nicht perfekt) lautet:

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

Mit den :text, :radiousw. Wählern selbst ist schlechte Praxis von jQuery betrachtet , da sie die Bewertung am Ende zu , *:textdie es viel länger dauern , als es sollte macht. Ich bevorzuge den Whitelist-Ansatz und wünschte, ich hätte ihn in meiner ursprünglichen Antwort verwendet. Wenn Sie jedoch den inputTeil des Selektors sowie den Cache des Formularelements angeben, sollte dies die Antwort mit der besten Leistung sein.

Diese Antwort weist möglicherweise noch einige Mängel auf, wenn die Standardeinstellung für ausgewählte Elemente keine Option mit einem leeren Wert ist. Sie ist jedoch mit Sicherheit so allgemein wie möglich und muss von Fall zu Fall behandelt werden .

Von http://groups.google.com/group/jquery-dev/msg/2e0b7435a864beea :

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

Die Einstellung myinput.val('')emuliert möglicherweise nicht 100% "Zurücksetzen", wenn Sie eine Eingabe wie diese haben:

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

Wenn Sie beispielsweise myinput.val('')eine Eingabe mit einem Standardwert von 50 aufrufen, wird diese auf eine leere Zeichenfolge gesetzt, während beim Aufrufen myform.reset()die Eingabe auf den Anfangswert von 50 zurückgesetzt wird.

Es gibt ein großes Problem mit Paolos akzeptierter Antwort. Erwägen:

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

In der .val('')Zeile werden auch alle valueKontrollkästchen und Optionsfelder gelöscht. Also, wenn Sie (wie ich) so etwas tun:

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

Wenn Sie die akzeptierte Antwort verwenden, werden Ihre Eingaben wie folgt umgewandelt:

<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />

Ups - ich habe diesen Wert verwendet!

Hier ist eine modifizierte Version, die Ihre Kontrollkästchen- und Funkwerte beibehält:

// 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 Plugin

Ich habe ein jQuery-Plugin erstellt, damit ich es problemlos überall dort verwenden kann, wo ich es brauche:

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;
}; 

Jetzt kann ich es verwenden, indem ich anrufe:

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

Das Löschen von Formularen ist etwas schwierig und nicht so einfach, wie es aussieht.

Schlagen Sie vor, dass Sie das jQuery-Formular-Plugin verwenden und dessen ClearForm- oder ResetForm- Funktionalität verwenden. Es kümmert sich um die meisten Eckfälle.

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

Normalerweise mache ich:

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

oder

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

Hier ist etwas, um Ihnen den Einstieg zu erleichtern

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

Wenn Sie Kontrollkästchen / Optionsfelder haben, müssen Sie diese natürlich ändern, um sie ebenfalls einzuschließen und festzulegen .attr({'checked': false});

bearbeiten Paolo Antwort ist prägnanter. Meine Antwort ist wortreicher, weil ich weder über den :inputSelektor Bescheid wusste noch daran dachte, das überprüfte Attribut einfach zu entfernen.

Erwägen Sie die Verwendung des Validierungs-Plugins - es ist großartig! Das Zurücksetzen des Formulars ist einfach:

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

Ich finde das funktioniert gut.

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

Grundsätzlich macht mich keine der angebotenen Lösungen glücklich. Wie einige Leute betonten, leeren sie das Formular, anstatt es zurückzusetzen.

Es gibt jedoch einige Javascript-Eigenschaften, die helfen:

• defaultValue für Textfelder
• defaultChecked für Kontrollkästchen und Optionsfelder
• defaultSelected für Auswahloptionen

Diese speichern den Wert, den ein Feld beim Laden der Seite hatte.

Das Schreiben eines jQuery-Plugins ist jetzt trivial: (für Ungeduldige ... hier ist eine Demo http://jsfiddle.net/kritzikratzi/N8fEF/1/ )

Plugin-Code

(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);

Verwendungszweck

// 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(); 

einige Notizen ...

• Ich habe mich nicht mit den neuen HTML5-Formularelementen befasst. Einige müssen möglicherweise speziell behandelt werden, aber die gleiche Idee sollte funktionieren.
• Elemente müssen direkt referenziert werden. dh $( "#container" ).resetValue()wird nicht funktionieren. Verwenden Sie $( "#container :input" )stattdessen immer .
• Wie oben erwähnt, ist hier eine Demo: http://jsfiddle.net/kritzikratzi/N8fEF/1/

Möglicherweise ist dies ohne jQuery einfacher zu lösen.

In normalem JavaScript ist dies so einfach wie:

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

Ich versuche mich immer daran zu erinnern, dass wir jQuery zwar verwenden, um unsere Codierung zu verbessern und zu beschleunigen, es aber manchmal nicht wirklich schneller ist. In diesen Fällen ist es oft besser, eine andere Methode zu verwenden.

Ich habe eine kleine Variation von Francis Lewis 'netter Lösung gemacht . Was seine Lösung nicht tut, ist, die Dropdown-Auswahl auf leer zu setzen. (Ich denke, wenn die meisten Leute "löschen" wollen, wollen sie wahrscheinlich alle Werte leer machen.) Dieser macht es mit .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;
};

Normalerweise füge ich dem Formular eine versteckte Schaltfläche zum Zurücksetzen hinzu. bei Bedarf nur: $ ('# reset'). click ();

Änderung der am häufigsten gewählten Antwort für die $(document).ready()Situation:

$('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();
});

Verwenden Sie einfach das Gleiche jQuery Trigger eventwie folgt:

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

Dadurch werden Kontrollkästchen, Radiobuttons, Textfelder usw. zurückgesetzt. Im Wesentlichen wird Ihr Formular in den Standardzustand versetzt. Setzen Sie einfach das #ID, Class, elementInnere des jQuerySelektors ein.

Das hat bei mir funktioniert. Die Pyrotex-Antwort hat die Auswahlfelder nicht zurückgesetzt und seine hier übernommen. Meine Bearbeitung:

// 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);

Ich verwende die Paolo Bergantino-Lösung, die großartig ist, aber nur wenige Änderungen enthält ... Speziell, um mit dem Formularnamen statt einer ID zu arbeiten.

Zum Beispiel:

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

Jetzt, wenn ich es benutzen will, könnte ich es tun

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

Wie Sie sehen, funktioniert dies mit jedem Formular. Da ich zum Erstellen der Schaltfläche einen CSS-Stil verwende, wird die Seite beim Klicken nicht aktualisiert. Nochmals vielen Dank an Paolo für Ihre Eingabe. Das einzige Problem ist, wenn ich Standardwerte im Formular habe.

Ich habe die folgende Lösung verwendet und sie hat bei mir funktioniert (Mischen von traditionellem Javascript mit jQuery).

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

Ich bin nur ein Fortgeschrittener in PHP und ein bisschen faul, in eine neue Sprache wie JQuery einzutauchen, aber ist das Folgende nicht eine einfache und elegante Lösung?

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

Ich kann keinen Grund erkennen, warum ich nicht zwei Senden-Schaltflächen habe, nur für unterschiedliche Zwecke. Dann einfach:

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

Sie definieren Ihre Werte einfach wieder auf den Standardwert zurück.

Eine Methode, die ich für ein ziemlich großes Formular (über 50 Felder) verwendet habe, bestand darin, das Formular einfach mit AJAX neu zu laden, im Grunde genommen einen Rückruf an den Server zu tätigen und die Felder nur mit ihren Standardwerten zurückzugeben. Dies ist viel einfacher, als zu versuchen, jedes Feld mit JS zu erfassen und es dann auf den Standardwert zu setzen. Außerdem konnte ich die Standardwerte an einem Ort aufbewahren - dem Servercode. Auf dieser Site gab es abhängig von den Einstellungen für das Konto auch einige unterschiedliche Standardeinstellungen, sodass ich mir keine Gedanken darüber machen musste, diese an JS zu senden. Das einzige kleine Problem, mit dem ich mich befassen musste, waren einige Vorschlagsfelder, die nach dem AJAX-Aufruf initialisiert werden mussten, aber keine große Sache.

Alle diese Antworten sind gut, aber der absolut einfachste Weg, dies zu tun, ist ein gefälschter Reset, dh Sie verwenden einen Link und eine Reset-Schaltfläche.

Fügen Sie einfach etwas CSS hinzu, um Ihre Schaltfläche zum Zurücksetzen zu verbergen.

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

Und dann fügen Sie auf Ihrem Link Folgendes hinzu

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

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

Hoffe das hilft! EIN.

<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>

Hier mit der Aktualisierung für Kontrollkästchen und wählt:

$('#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');

Ich hatte das gleiche Problem und der Posten von Paolo half mir, aber ich musste eines anpassen. Mein Formular mit der ID advancedindexsearch enthielt nur Eingabefelder und ruft die Werte aus einer Sitzung ab. Aus irgendeinem Grund hat Folgendes bei mir nicht funktioniert:

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

Wenn ich danach eine Warnung einfügte, sah ich, dass die Werte korrekt entfernt wurden, aber danach wurden sie wieder ersetzt. Ich weiß immer noch nicht wie oder warum, aber die folgende Zeile hat den Trick für mich getan:

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

Paolos Antwort berücksichtigt keine Datumsauswahl. Fügen Sie dies hinzu in:

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

Ich habe die ursprüngliche Antwort von Paolo Bergantino ein wenig verbessert

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

Auf diese Weise kann ich jedes Kontextelement an die Funktion übergeben. Ich kann das gesamte Formular oder nur einen bestimmten Satz von Feldern zurücksetzen, zum Beispiel:

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

Außerdem bleiben die Standardwerte der Eingaben erhalten.

Hier ist meine Lösung, die auch mit den neuen HTML5-Eingabetypen funktioniert:

/**
 * 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;
        }
    });
}

Wenn Sie das SELECT2-Plugin verwenden und die akzeptierte Antwort ergänzen, müssen Sie das select2-Skript zurückrufen, um Änderungen vorzunehmen. Alle select2-Felder:

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);