So setzen Sie ein Formular mit jQuery mit der Methode .reset () zurück

270

Ich hatte einen Arbeitscode, der mein Formular zurücksetzen konnte, wenn ich auf eine Schaltfläche zum Zurücksetzen klickte. Nachdem mein Code jedoch länger wird, stelle ich fest, dass er nicht mehr funktioniert.

 <div id="labels">
        <table class="config">
            <thead>
                <tr>
                    <th colspan="4"; style= "padding-bottom: 20px; color:#6666FF; text-align:left; font-size: 1.5em">Control Buttons Configuration</th>
                </tr>
                <tr>
                    <th>Index</th>
                    <th>Switch</th>
                    <th>Response Number</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>

                <form id="configform" name= "input" action="#" method="get">
                <tr><td style="text-align: center">1</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" value="" id="number_one"></td>
                    <td><input style="background: white; color: black;" type="text"  id="label_one"></td>
                </tr>
                <tr>
                    <td style="text-align: center">2</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id = "number_two" value=""></td>
                    <td><input style="background: white; color: black;" type="text"  id = "label_two"></td>
                </tr>
                <tr>
                    <td style="text-align: center">3</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id="number_three" value=""></td>
                    <td><input style="background: white; color: black;" type="text" id="label_three"></td>
                </tr>
                <tr>
                    <td style="text-align: center">4</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id="number_four" value=""></td>
                    <td><input style="background: white; color: black;" type="text" id="label_three"></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" id="configsubmit" value="Submit"></td>
                </tr>
                <tr>
                    <td><input type="reset" id="configreset" value="Reset"></td>
                </tr>

                </form>
            </tbody>
        </table>

    </div>

Und meine jQuery:

 $('#configreset').click(function(){
            $('#configform')[0].reset();
 });

Gibt es eine Quelle, die ich in meine Codes aufnehmen sollte, damit die .reset()Methode funktioniert? Zuvor habe ich verwendet:

<script src="static/jquery.min.js">
</script>
<script src="static/jquery.mobile-1.2.0.min.js">
</script>

und die .reset()Methode funktionierte.

Zur Zeit benutze ich

<script src="static/jquery-1.9.1.min.js"></script>      
<script src="static/jquery-migrate-1.1.1.min.js"></script>
<script src="static/jquery.mobile-1.3.1.min.js"></script>

Könnte es möglicherweise einer der Gründe sein?

Yvonnezoe
quelle
Können Sie ein Beispiel dafür geben, dass es nicht funktioniert? Wird eines der Felder zurückgesetzt?
Arun P Johny
es ist so etwas wie das, aber es funktioniert hier gut jsfiddle.net/chJ8B :( wahrscheinlich wegen anderer Teile des Skripts? aber ich habe nur 1 Form
yvonnezoe
Meine Frage ist, ob keines der Felder zurückgesetzt wird / einige funktionieren
Arun P Johny
13
Ihr HTML ist ungültig . Ein Formular kann kein untergeordnetes Element eines TBODY-Elements sein, und ein TR kann kein untergeordnetes Element eines FORM-Elements sein. Platzieren Sie die Formular-Tags außerhalb der Tabelle (dh setzen Sie die Tabelle in das Formular). Möglicherweise wird das Formular außerhalb der Tabelle verschoben, aber die Formularsteuerelemente verbleiben in den Zellen, sodass sie nicht mehr im Formular enthalten sind.
RobG
@RobG: O guter Punkt! Ich werde es versuchen. Danke! Ich hätte diesen nützlichen Kommentar verpassen können, wenn ich nicht hierher zurückgekommen wäre, um meinen Geigen-Link zu bekommen: s
yvonnezoe

Antworten:

462

Sie können versuchen, den Trigger () -Referenzlink zu verwenden

$('#form_id').trigger("reset");
SagarPPanchal
quelle
2
Einfach magisch und geradlinig! Sehr geschätzt für das Teilen.
Ajay Kumar
Sehr geehrte Wähler, können Sie mir bitte den Grund für Ihre Abstimmungen mitteilen, damit ich meine Antwort verbessern kann?
SagarPPanchal
Ich verwende $ ('. Profile_img_form'). Trigger ('reset'); Ich habe profile_img_form namens class in mein Formular aufgenommen und es dann aufgerufen. Es setzt mein Formular nicht zurück und gibt eine Fehlermeldung wie Uncaught SyntaxError zurück: Ungültiger regulärer Ausdruck: /(^|\.)bs\.(?:.*\.|)fileinput(\.|$)/: Bitte schlagen Sie vor, was ist Problem. Vielen Dank.
Kamlesh
@Kamlesh es sollte funktionieren, ich habe eine Demo für Sie erstellt, klicken Sie auf jsfiddle.net/Lkt4eq9y/2
SagarPPanchal
1
Danke für die Antwort. Gespeicherte Stunden des Googelns / SO'ing :)
Anjana Silva
276

http://jsfiddle.net/8zLLn/

  $('#configreset').click(function(){
        $('#configform')[0].reset();
  });

Legen Sie es in JS Geige. Arbeitete wie vorgesehen.

Keines der oben genannten Probleme ist hier schuld. Vielleicht haben Sie ein widersprüchliches ID-Problem? Wird der Klick tatsächlich ausgeführt?

Bearbeiten: (weil ich ein trauriger Sack ohne angemessene Kommentarfähigkeit bin) Es ist kein Problem direkt mit Ihrem Code. Es funktioniert einwandfrei, wenn Sie es aus dem Kontext der Seite entfernen, die Sie gerade verwenden. Anstatt dass es sich um etwas mit den bestimmten jQuery / Javascript- und zugeordneten Formulardaten handelt, muss es etwas anderes sein. Ich würde anfangen, den Code um ihn herum zu halbieren und versuchen herauszufinden, wo er vor sich geht. Ich meine, nur um sicherzugehen, könnten Sie ...

console.log($('#configform')[0]);

in der Klickfunktion und stellen Sie sicher, dass es auf die richtige Form abzielt ...

und wenn ja, muss es etwas sein, das hier nicht aufgeführt ist.

Teil 2 bearbeiten: Eine Sache, die Sie versuchen könnten (wenn es nicht richtig ausgerichtet ist), ist die Verwendung von "input: reset" anstelle dessen, was Sie verwenden. Außerdem würde ich vorschlagen, weil es nicht das Ziel ist, das falsch funktioniert, um es herauszufinden worauf der eigentliche Klick abzielt. Öffnen Sie einfach die Firebug- / Entwicklertools, was Sie haben

console.log($('#configreset'))

und sehen, was auftaucht. und dann können wir von dort gehen.

FullOnFlatWhite
quelle
Keine widersprüchliche ID :( Ich versuche, Schicht für Schicht auszuwählen und zu überprüfen, ob der Klick funktioniert
Yvonnezoe
1
hmm scheint der klick funktioniert nicht! Ich habe $('#ptest').html("clicked reset")im Klick hinzugefügt (function () {}); wo es "geklicktes Zurücksetzen" anzeigen sollte, aber es nicht angezeigt wurde
yvonnezoe
Ich habe hier eine Frage. Jedes Mal, wenn ich console.log benutze, habe ich keine Ahnung, wo ich darauf achten soll. Ich verwende Python IDLE und ein Terminal, um das Python-Skript auszuführen. Das Javascript ist drin. Jedenfalls, wenn ich `alert ($ ('# configform') [0]) verwende, gibt es mir [Objekt HTMLFormElement]
yvonnezoe
1
Versuchen Sie es mit alert (JSON.stringify ($ '# configform') [0]). Alert kümmert sich nicht viel um hübsche Druckobjekte (oder darum, Ihnen zu sagen, was darin enthalten ist). Es lässt Sie nur wissen, dass es sich um ein Objekt handelt.
FullOnFlatWhite
1
@ DylanChensky Die Magie von jQuery ist, dass alles eine Menge (Array) ist. Als ob Sie in jQuery ein reguläres Array verwenden würden, [0]wird das erste Element ausgewählt. In jQuery wird jedoch das tatsächliche HTML des Elements ausgewählt. So,[0] gibt Ihnen die html, mit dem Sie die HTML aufrufen können, nicht jQuery, Methode aufgerufen reset. Weitere Informationen finden Sie in der Antwort von @kevin unten.
FullOnFlatWhite
110

Laut diesem Beitrag hier hat jQuery keine reset()Methode; aber natives JavaScript tut es. Konvertieren Sie das jQuery-Element in ein JavaScript-Objekt, indem Sie entweder Folgendes verwenden:

$("#formId")[0].reset()
// or
$("#formId").get(0).reset()
Kevin
quelle
1
Es funktioniert und ich bin damit einverstanden, dass jQuery keine reset () -Methode hat. Sie können sehen, wie es mit nativem JavaScript gemacht wird unter w3school doc: w3schools.com/jsref/met_form_reset.asp
serfer2
2
Ich möchte darauf hinweisen , dass dies nur zurückgesetzt , die Form, es ist nicht klar. Das heißt, wenn für das Formular mit der Anforderung Werte gesendet wurden, werden diese wiederhergestellt.
Beschützer ein
Ich möchte einen Kommentar zum Platzhalter, zum anfänglichen Rendern des Formulars und zu Formularelementen hinzufügen, die nach dem Zurücksetzen unabhängig vom wieder angezeigten Platzhalter Werte für den Platzhalter haben. Der Wert wird jedoch leer. Seien Sie also bei der Formularvalidierung vorsichtig. Ich habe eine generische Formularüberprüfung hinzugefügt, um zu überprüfen, ob der Platzhalterwert Standard ist.
Ramratan Gupta
48

Dies ist eines der Dinge, die in Vanille-Javascript tatsächlich einfacher zu erledigen sind als in jQuery. jQuery hat keinereset Methode, das HTML-Formularelement jedoch, sodass Sie alle Felder in einem Formular wie folgt zurücksetzen können:

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

Wenn Sie dies über jQuery tun (wie in anderen Antworten hier zu sehen :) $('#configform')[0].reset(), [0]ruft das gleiche Formular-DOM-Element ab, über das Sie direkt erhalten würden document.getElementById. Der letztere Ansatz ist jedoch sowohl effizienter als auch einfacher (da Sie mit dem jQuery-Ansatz zuerst eine Sammlung erhalten und dann ein Element daraus abrufen müssen, während Sie mit dem Vanille-Javascript das Element nur direkt erhalten).

Nick F.
quelle
23

Eine Reset-Schaltfläche benötigt überhaupt kein Skript (oder Name oder ID):

<input type="reset">

und du bist fertig. Aber wenn Sie wirklich müssen Skript verwenden, beachten Sie, dass jedes Formular - Steuerelement hat eine Form Eigenschaft , dass Verweise der Form ist es in, so dass Sie tun können:

<input type="button" onclick="this.form.reset();">

Eine Reset-Taste ist jedoch eine weitaus bessere Wahl.

RobG
quelle
Du meinst einfach nur diese Linie reicht aus? oO also ist mein HTML oben korrekt?
Yvonnezoe
Definieren Sie "funktioniert nicht". Welchen Fehler bekommen Sie? Was funktioniert nicht? Reset-Schaltflächen waren schon immer Teil von HTML-Formularen, sie funktionieren.
RobG
1
"funktioniert nicht" - es wird nichts zurückgesetzt, es wurde keine Änderung im Formular festgestellt.
Yvonnezoe
1
Zu beachten ist, dass "Zurücksetzen" nicht bedeutet, dass mein Formular gelöscht wurde. Die Semantik von "Zurücksetzen" bewirkt, dass alle "Formular" -Elemente auf ihre ursprünglichen "Wert" -Attribute zurückgesetzt werden. Das hat mich wenigstens ein paar Minuten verwirrt!
Jocull
@ jocull - Wenn alles andere fehlschlägt, gibt es immer entweder die W3C- oder die WHATWG- Version des HTML-Standards. ;-)
RobG
21

Ich habe endlich das Problem gelöst !! @RobG hatte Recht mit dem formTag und dem tableTag. Das formTag sollte außerhalb des Tisches platziert werden. damit,

<td><input type="reset" id="configreset" value="Reset"></td>

funktioniert ohne die Notwendigkeit von jquery oder irgendetwas anderem. Einfach auf den Button klicken und tadaa ~ das ganze Formular wird zurückgesetzt;) genial!

Yvonnezoe
quelle
3
Normalerweise können Sie bestätigen, dass dies geschieht, indem Sie den Quellcode überprüfen (ohne die Seitenquelle anzuzeigen, da dies zeigt, was generiert wurde, sondern etwas wie Developer Tools <kbd> F12 </ kbd> verwenden), das Ihnen zeigt, "was das ist Browser sieht "- in diesem Fall würde es Ihnen (zumindest in Chrome) zeigen, dass das formTag zu Beginn des automatisch geschlossen wurde tbody, mit Ausnahme der Eingabeelemente.
Drzaus
Überprüfen Sie die Kompatibilität: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset
Diego Avila
16

Ich benutze diesen einfachen Code:

//reset form 
$("#mybutton").click(function(){
    $("#myform").find('input:text, input:password, input:file, select, textarea').val('');
    $("#myform").find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
});
fausto
quelle
13

Mit den jquery-Funktionen .closest (Element) und .find (...) .

Das übergeordnete Element erhalten und das Kind suchen .

Führen Sie schließlich die erforderliche Funktion aus.

$("#form").closest('form').find("input[type=text], textarea").val("");
aldrien.h
quelle
4
Während dieser Codeblock die Frage beantworten kann, sollten Sie immer eine Erklärung dafür geben, warum dies so ist.
Sascha Wolf
1
$("#form").find("input[type=text], textarea").val("");Ich habe es so gemacht
Bira
11

In der ersten Zeile werden die Formulareingaben zurückgesetzt

$('form#myform').trigger("reset"); //Line1
$('form#myform select').trigger("change"); //Line2

Der zweite setzt select2 zurück

Optional: Sie können dies verwenden, wenn Sie verschiedene Typen mit unterschiedlichen Ereignissen registriert haben

$('form#myform select, form input[type=checkbox]').trigger("change"); //Line2
Ali Jamal
quelle
5

Mit dieser jQuery-Reset-Funktion ist ein schnelles Zurücksetzen der Formularfelder möglich.

Wenn Sie eine Erfolgsantwort erhalten haben, feuern Sie unter dem Code.

$(selector)[0].reset();

Kiran Kanzar
quelle
4

Sie können einfach einen Eingabetyp = reset mit einer solchen id = resetform hinzufügen

<html>
<form>
<input type = 'reset' id = 'resetform' value = 'reset'/>
<!--Other items in the form can be placed here-->
</form>
</html>

dann verwenden Sie mit jquery einfach die Funktion .click () für das Element mit der ID = resetform wie folgt

<script> 
$('#resetform').click();
</script>

und das Formular wird zurückgesetzt Hinweis: Sie können die Schaltfläche zum Zurücksetzen auch mit id = resetform mithilfe Ihres CSS ausblenden

<style>
#resetform
{
display:none;
}
</style>
Chuksy
quelle
Vergiss nicht, es zu verstecken ... um es zu einer moderneren Form zu machen. <input type = 'reset' id = 'resetform' value = 'reset' / style = 'display: none;'>
Mangas
3

Hier ist eine einfache Lösung mit Jquery. Es funktioniert global. Schauen Sie sich den Code an.

$('document').on("click", ".clear", function(){
   $(this).closest('form').trigger("reset");
})

Fügen Sie einer Schaltfläche in jeder Form, die Sie zum Zurücksetzen benötigen, eine eindeutige Klasse hinzu. Beispielsweise:

<button class="button clear" type="reset">Clear</button>
Ijharul Islam
quelle
3

jQuery hat keine reset()Methode; aber natives JavaScript tut es. Konvertieren Sie das jQuery-Element in ein JavaScript-Objekt, indem Sie entweder Folgendes verwenden:

$("#formId")[0].reset();

$("#formId").get(0).reset();

Wir können einfach Javascript-Code verwenden

document.getElementById("formid").reset();
Vivek Pawar
quelle
2
<button type="reset">Reset</reset>

Am einfachsten kann ich mir vorstellen, dass das robust ist. Innerhalb des Formular-Tags platzieren.

Lichtdesign
quelle
1

Sie können Folgendes verwenden.

@using (Html.BeginForm("MyAction", "MyController", new { area = "MyArea" }, FormMethod.Post, new { @class = "" }))
{
<div class="col-md-6">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
        @Html.LabelFor(m => m.MyData, new { @class = "col-form-label" })
    </div>
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
        @Html.TextBoxFor(m => m.MyData, new { @class = "form-control" })
    </div>
</div>
<div class="col-md-6">
    <div class="">
        <button class="btn btn-primary" type="submit">Send</button>
        <button class="btn btn-danger" type="reset"> Clear</button>
    </div>
</div>
}

Dann löschen Sie das Formular:

    $('.btn:reset').click(function (ev) {
        ev.preventDefault();
        $(this).closest('form').find("input").each(function(i, v) {
            $(this).val("");
        });
    });
RainyTears
quelle
Hier scheint es viel Framework-spezifischen Code zu geben. Ich empfehle, solche Dinge bei der Beantwortung von Fragen zu SO zu vermeiden, da in der Frage nicht angegeben wurde, dass sie ein Framework außer jQuery
Lazerbeak12345 verwenden.
0

Ihr Code sollte funktionieren. Stellen Sie sicher, dass static/jquery-1.9.1.min.jsvorhanden. Sie können auch versuchen, zu zurückzukehren static/jquery.min.js. Wenn das Problem dadurch behoben wird, haben Sie das Problem genau ermittelt.

ic3b3rg
quelle
Das einzige andere Problem, an das ich denken kann, ist, dass Sie ein anderes Formular mit derselben ID ( configform) haben. Sie sollten einige Untersuchungen über die Konsole durchführen. Erster Versuch $. Wenn Sie Chrome verwenden, wird durch Eingabe $in die Konsole eine kontextsensitive Liste aktiviert, wenn jQuery geladen wird. Wenn Sie die Eingabetaste eingeben $und drücken, wird eine Funktion ausgewertet, wenn jQuery geladen ist. Nächster Versuch $("#configform"). Klicken Sie mit der rechten Maustaste auf das Ergebnis und wählen Sie Reveal in Elements panel.
ic3b3rg
Danke :) aber ich habe kein Chrom. ist es der gleiche Weg, es mit Firebug zu tun? (Ich habe es installiert, aber nie zuvor verwendet)
Yvonnezoe