it-swarm.com.de

Zurücksetzen eines mehrstufigen Formulars mit jQuery

Ich habe ein Formular mit einem Standard-Reset-Button, der folgendermaßen codiert ist:

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

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

Ich denke, dass das Anfügen einer jQuery-Funktion, die alle Felder durchläuft und sie manuell löscht, den Trick erfüllt. Ich verwende bereits jQuery innerhalb des Formulars, bin aber gerade erst auf dem neuesten Stand und bin mir daher nicht sicher, wie er vorgehen soll, mit der Ausnahme, dass jedes Feld einzeln nach ID referenziert wird.

TIA für jede Hilfe.

344
da5id

aktualisiert im März 2012.

Also, zwei Jahre nachdem ich diese Frage ursprünglich beantwortet habe, komme ich zurück, um zu sehen, dass sie sich ziemlich in ein großes Chaos verwandelt hat. Ich habe das Gefühl, es wird Zeit, dass ich darauf zurückkomme und meine Antwort wirklich richtig mache, da dies die am meisten positive Bewertung ist.

Für das Protokoll ist die Antwort von Titi falsch, da es nicht das ist, was das ursprüngliche Poster verlangt - es ist richtig, dass es möglich ist, ein Formular mit der systemeigenen reset () -Methode zurückzusetzen, aber diese Frage versucht, ein Formular aus dem Speicher zu löschen Werte, die im Formular verbleiben würden, wenn Sie es auf diese Weise zurücksetzen. Deshalb ist ein "manueller" Reset erforderlich. Ich gehe davon aus, dass die meisten Leute diese Frage bei einer Google-Suche gefunden haben und wirklich nach der reset () -Methode suchen, aber es funktioniert nicht für den speziellen Fall, über den das OP spricht.

Meine Original Antwort war diese:

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

Was in vielen Fällen funktionieren könnte, einschließlich für das OP, aber wie in den Kommentaren und in anderen Antworten dargelegt, werden die Radio-/Checkbox-Elemente von allen Wertattributen gelöscht.

Eine mehr richtige 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

Die Verwendung der Selektoren :text, :radio usw. selbst wird von jQuery als schlechte Praxis betrachtet, da sie am Ende nach *:text ausgewertet werden, wodurch es viel länger dauert, als es sollte. Ich bevorzuge den Whitelist-Ansatz und wünschte, ich hätte ihn in meiner ursprünglichen Antwort verwendet. Wenn Sie jedoch den Teil input des Selektors plus den Cache des Formularelements angeben, sollte dies hier die beste Antwort sein.

Diese Antwort kann noch einige Mängel aufweisen, wenn die Standardeinstellung für Elemente von people keine leere Option ist, aber es ist sicherlich so generisch wie es sein wird und dies muss von Fall zu Fall erfolgen .

494

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

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

die Einstellung myinput.val('') emuliert möglicherweise nicht 100% "reset", wenn Sie einen solchen Eingang haben:

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

Der Aufruf von myinput.val('') für einen Eingang mit einem Standardwert von 50 würde ihn auf eine leere Zeichenfolge setzen, während der Aufruf von myform.reset() ihn auf den Anfangswert von 50 zurücksetzen würde.

Es gibt ein großes Problem mit der akzeptierten Antwort von Paolo. Erwägen:

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

Die Zeile.val('')löscht auch alle values, die Kontrollkästchen und Optionsfeldern zugewiesen sind. Wenn Sie also (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" />

Durch die Verwendung der akzeptierten Antwort werden Ihre Eingaben in Folgendes 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 Checkbox- 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');
48
leepowers

jQuery Plugin

Ich habe ein jQuery-Plugin erstellt, damit ich es einfach überall 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 benutzen, indem ich anrufe:

$('#my-form').clear();
15
Francis Lewis

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 übernimmt die meisten Eckfälle.

14
Cherian

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

14

Normalerweise mache ich:

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

oder

$('#formId').get(0).reset()
13
Ricardo Bin

Erwägen Sie die Verwendung des Plugins validation - es ist großartig! Und das Formular zurückzusetzen ist einfach:

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

Hier ist etwas zum Einstieg

$('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 dies natürlich ändern, um sie ebenfalls einzuschließen und .attr({'checked': false}); zu setzen.

editPaolos Antwort ist prägnanter. Meine Antwort ist eher wortreich, weil ich weder über den :input-Selektor wusste noch überlegte, ob ich das geprüfte Attribut einfach entfernen wollte.

4
alex

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

es gibt jedoch einige Javascript-Eigenschaften, die helfen: 

  • defaultValue für Textfelder
  • defaultAuf Checkboxen und Optionsfelder geprüft
  • defaultAusgewählt für Auswahloptionen

diese speichern den Wert, den ein Feld hatte, als die Seite geladen wurde. 

das Schreiben eines jQuery-Plugins ist nun 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 benötigen eine spezielle Behandlung, aber die gleiche Idee sollte funktionieren. 
  • elemente müssen direkt referenziert werden. d. h. $( "#container" ).resetValue() funktioniert nicht. Verwenden Sie stattdessen immer $( "#container :input" )
  • wie bereits erwähnt, hier eine Demo: http://jsfiddle.net/kritzikratzi/N8fEF/1/
4
kritzikratzi

Ich habe eine leichte Variation von Francis Lewis 'Nice-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;
};
4
Luke

Sie könnten feststellen, dass dies ohne jQuery tatsächlich einfacher zu lösen ist.

In normalem JavaScript ist dies so einfach wie:

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

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

4
Ken Le

Das finde ich gut.

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

Änderung der am besten 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();
});
2
Slawa

Verwenden Sie einfach den jQuery Trigger event so:

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

Dadurch werden Kontrollkästchen, Radiobuttons, Textfelder usw. zurückgesetzt. Im Wesentlichen wird das Formular in den Standardzustand versetzt. Fügen Sie einfach den #ID, Class, element in die jQuery-Auswahl ein.

2
James111

Normalerweise füge ich dem Formular einen versteckten Reset-Button hinzu. $ ('# reset'). click (); 

2
Alberto Nunes

Ich bin nur ein Mittelstufe in PHP und etwas faul, um 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 dafür finden, warum Sie nicht zwei Senden-Schaltflächen haben, nur zu unterschiedlichen Zwecken. Dann einfach:

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

Sie müssen Ihre Werte einfach auf das zurücksetzen, was der Standard sein soll.

1
Karel

Ich habe die Lösung unten verwendet und es funktionierte für mich (Mischen von traditionellem Javascript mit jQuery)

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

das funktionierte für mich, pyrotex antwort hat keine Felder zurückgesetzt, nahm seine, hier '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);
1
kertal

Ich verwende eine Paolo Bergantino-Lösung, die zwar großartig ist, aber mit wenigen Optimierungen arbeitet. Speziell für die Verwendung des Formularnamens statt einer ID.

Zum Beispiel:

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

Wenn ich es jetzt benutzen möchte, könnte ich es tun

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

Wie Sie sehen, funktioniert dies mit jedem Formular und da ich einen CSS-Stil zum Erstellen der Schaltfläche verwende, wird die Seite nicht aktualisiert, wenn Sie darauf klicken. Nochmals vielen Dank Paolo für Ihre Beiträge. Das einzige Problem ist, wenn ich Werte im Formular habe.

1
raphie

Alle diese Antworten sind gut, aber der absolut einfachste Weg ist ein gefälschter Reset, d. H. Sie verwenden einen Link und einen Reset-Button. 

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

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

Und dann auf Ihrem Link fügen Sie wie folgt 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! A.

0
André Figueira

Hier mit der Aktualisierung für Ankreuzfelder und Auswahl:

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

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 Eingänge erhalten.

0
berosoboy
<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>
0
sanjay

Eine Methode, die ich für ein relativ großes Formular (über 50 Felder) verwendet habe, bestand darin, das Formular einfach mit AJAX neu zu laden, im Grunde einen Rückruf an den Server auszuführen und die Felder mit ihren Standardwerten zurückzugeben. Dies ist viel einfacher, als zu versuchen, jedes Feld mit JS zu packen und es dann auf seinen Standardwert zu setzen. Es erlaubte mir auch, die Standardwerte an einer Stelle zu behalten - den Code des Servers. Auf dieser Site gab es auch einige Standardeinstellungen, die von den Einstellungen für das Konto abhängen. Daher musste ich mir keine Sorgen machen, diese an JS zu senden. Das einzige kleine Problem, mit dem ich mich befassen musste, waren einige Felder, die nach dem Aufruf von AJAX initialisiert werden mussten, aber keine große Sache.

0
Darryl Hein

Ich hatte das gleiche Problem und der Posten von Paolo half mir, aber ich musste eine Sache anpassen. Mein Formular mit der ID advancedindexsearch enthielt nur Eingabefelder und ruft die Werte einer Sitzung ab. Aus irgendeinem Grund funktionierte das Folgende nicht für mich:

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

Wenn ich danach eine Warnmeldung auslegte, sah ich, dass die Werte richtig entfernt wurden, aber danach wurden sie wieder ersetzt. Ich weiß immer noch nicht wie oder warum, aber die folgende Zeile hat mir geholfen:

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

Um die akzeptierte Antwort zu ergänzen, müssen Sie, wenn Sie das SELECT2-Plugin verwenden, das select2-Skript aufrufen, um Änderungen vorzunehmen. Dies sind 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();
    }
0

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;
        }
    });
}
0
pubkey

Die Antwort von Paolo berücksichtigt keine Datumsauswahl. Fügen Sie Folgendes hinzu:

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