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.
not()
wenn Ihr Formular versteckte Eingaben enthält.Antworten:
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:
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:
Mit den
:text
,:radio
usw. Wählern selbst ist schlechte Praxis von jQuery betrachtet , da sie die Bewertung am Ende zu ,*:text
die 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 deninput
Teil 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 .
quelle
.val('')
alle Werte auf zurückgesetzt werden,''
auch wenn diese Werte in Optionsfeldern und Kontrollkästchen verwendet werden. Wenn ich also den obigen Code ausführe, verliere ich wertvolle Informationen aus dem Formular, nicht nur was der Benutzer eingegeben hat.Von http://groups.google.com/group/jquery-dev/msg/2e0b7435a864beea :
Die Einstellung
myinput.val('')
emuliert möglicherweise nicht 100% "Zurücksetzen", wenn Sie eine Eingabe wie diese haben:Wenn Sie beispielsweise
myinput.val('')
eine Eingabe mit einem Standardwert von 50 aufrufen, wird diese auf eine leere Zeichenfolge gesetzt, während beim Aufrufenmyform.reset()
die Eingabe auf den Anfangswert von 50 zurückgesetzt wird.quelle
Es gibt ein großes Problem mit Paolos akzeptierter Antwort. Erwägen:
In der
.val('')
Zeile werden auch allevalue
Kontrollkästchen und Optionsfelder gelöscht. Also, wenn Sie (wie ich) so etwas tun:Wenn Sie die akzeptierte Antwort verwenden, werden Ihre Eingaben wie folgt umgewandelt:
Ups - ich habe diesen Wert verwendet!
Hier ist eine modifizierte Version, die Ihre Kontrollkästchen- und Funkwerte beibehält:
quelle
select
Elementen nicht. Kannst du das reparieren?:text
,:password
usw. Wähler für sich , ohne die Angabeinput
Teil, sonst ist es zu auswertet*:text
dem durchläuft jedes Element in dem Dokument , anstatt nur<input>
Tags mitinput:text
#myFormId
Kontext als zweites Argument übergeben$()
- das ist$(':input', '#context')
- das ist identisch$('#context').filter(':input')
jQuery Plugin
Ich habe ein jQuery-Plugin erstellt, damit ich es problemlos überall dort verwenden kann, wo ich es brauche:
Jetzt kann ich es verwenden, indem ich anrufe:
quelle
.prop("checked", false)
? stackoverflow.com/questions/5874652/prop-vs-attrDas 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.
quelle
document.getElementById ('frm'). reset ()
quelle
Normalerweise mache ich:
oder
quelle
Hier ist etwas, um Ihnen den Einstieg zu erleichtern
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
:input
Selektor Bescheid wusste noch daran dachte, das überprüfte Attribut einfach zu entfernen.quelle
Erwägen Sie die Verwendung des Validierungs-Plugins - es ist großartig! Das Zurücksetzen des Formulars ist einfach:
quelle
Ich finde das funktioniert gut.
quelle
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:
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
Verwendungszweck
einige Notizen ...
$( "#container" ).resetValue()
wird nicht funktionieren. Verwenden Sie$( "#container :input" )
stattdessen immer .quelle
Möglicherweise ist dies ohne jQuery einfacher zu lösen.
In normalem JavaScript ist dies so einfach wie:
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.
quelle
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)
.quelle
Normalerweise füge ich dem Formular eine versteckte Schaltfläche zum Zurücksetzen hinzu. bei Bedarf nur: $ ('# reset'). click ();
quelle
Änderung der am häufigsten gewählten Antwort für die
$(document).ready()
Situation:quelle
Verwenden Sie einfach das Gleiche
jQuery Trigger event
wie folgt:Dadurch werden Kontrollkästchen, Radiobuttons, Textfelder usw. zurückgesetzt. Im Wesentlichen wird Ihr Formular in den Standardzustand versetzt. Setzen Sie einfach das
#ID, Class, element
Innere desjQuery
Selektors ein.quelle
Das hat bei mir funktioniert. Die Pyrotex-Antwort hat die Auswahlfelder nicht zurückgesetzt und seine hier übernommen. Meine Bearbeitung:
quelle
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:
Jetzt, wenn ich es benutzen will, könnte ich es tun
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.
quelle
Ich habe die folgende Lösung verwendet und sie hat bei mir funktioniert (Mischen von traditionellem Javascript mit jQuery).
quelle
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?
Ich kann keinen Grund erkennen, warum ich nicht zwei Senden-Schaltflächen habe, nur für unterschiedliche Zwecke. Dann einfach:
Sie definieren Ihre Werte einfach wieder auf den Standardwert zurück.
quelle
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.
quelle
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.
Und dann fügen Sie auf Ihrem Link Folgendes hinzu
Hoffe das hilft! EIN.
quelle
quelle
Hier mit der Aktualisierung für Kontrollkästchen und wählt:
quelle
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:
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:
quelle
Paolos Antwort berücksichtigt keine Datumsauswahl. Fügen Sie dies hinzu in:
quelle
Ich habe die ursprüngliche Antwort von Paolo Bergantino ein wenig verbessert
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:
Außerdem bleiben die Standardwerte der Eingaben erhalten.
quelle
Hier ist meine Lösung, die auch mit den neuen HTML5-Eingabetypen funktioniert:
quelle
break
folgendencheckbox
undradio
Fälle verschieben. In der aktuellen Position ist dies nicht erforderlich.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:
quelle
quelle