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?
javascript
jquery
forms
reset
Yvonnezoe
quelle
quelle
Antworten:
Sie können versuchen, den Trigger () -Referenzlink zu verwenden
quelle
http://jsfiddle.net/8zLLn/
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 ...
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
und sehen, was auftaucht. und dann können wir von dort gehen.
quelle
$('#ptest').html("clicked reset")
im Klick hinzugefügt (function () {}); wo es "geklicktes Zurücksetzen" anzeigen sollte, aber es nicht angezeigt wurde[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 aufgerufenreset
. Weitere Informationen finden Sie in der Antwort von @kevin unten.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:quelle
Dies ist eines der Dinge, die in Vanille-Javascript tatsächlich einfacher zu erledigen sind als in jQuery. jQuery hat keine
reset
Methode, das HTML-Formularelement jedoch, sodass Sie alle Felder in einem Formular wie folgt zurücksetzen können: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ürdendocument.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).quelle
Eine Reset-Schaltfläche benötigt überhaupt kein Skript (oder Name oder ID):
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:
Eine Reset-Taste ist jedoch eine weitaus bessere Wahl.
quelle
Ich habe endlich das Problem gelöst !! @RobG hatte Recht mit dem
form
Tag und demtable
Tag. Dasform
Tag sollte außerhalb des Tisches platziert werden. damit,funktioniert ohne die Notwendigkeit von jquery oder irgendetwas anderem. Einfach auf den Button klicken und tadaa ~ das ganze Formular wird zurückgesetzt;) genial!
quelle
form
Tag zu Beginn des automatisch geschlossen wurdetbody
, mit Ausnahme der Eingabeelemente.Ich benutze diesen einfachen Code:
quelle
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.
quelle
$("#form").find("input[type=text], textarea").val("");
Ich habe es so gemachtIn der ersten Zeile werden die Formulareingaben zurückgesetzt
Der zweite setzt select2 zurück
Optional: Sie können dies verwenden, wenn Sie verschiedene Typen mit unterschiedlichen Ereignissen registriert haben
quelle
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();
quelle
Sie können einfach einen Eingabetyp = reset mit einer solchen id = resetform hinzufügen
dann verwenden Sie mit jquery einfach die Funktion .click () für das Element mit der ID = resetform wie folgt
und das Formular wird zurückgesetzt Hinweis: Sie können die Schaltfläche zum Zurücksetzen auch mit id = resetform mithilfe Ihres CSS ausblenden
quelle
Hier ist eine einfache Lösung mit Jquery. Es funktioniert global. Schauen Sie sich den Code an.
Fügen Sie einer Schaltfläche in jeder Form, die Sie zum Zurücksetzen benötigen, eine eindeutige Klasse hinzu. Beispielsweise:
quelle
jQuery hat keine
reset()
Methode; aber natives JavaScript tut es. Konvertieren Sie das jQuery-Element in ein JavaScript-Objekt, indem Sie entweder Folgendes verwenden:Wir können einfach Javascript-Code verwenden
quelle
Am einfachsten kann ich mir vorstellen, dass das robust ist. Innerhalb des Formular-Tags platzieren.
quelle
Sie können Folgendes verwenden.
Dann löschen Sie das Formular:
quelle
Ihr Code sollte funktionieren. Stellen Sie sicher, dass
static/jquery-1.9.1.min.js
vorhanden. Sie können auch versuchen, zu zurückzukehrenstatic/jquery.min.js
. Wenn das Problem dadurch behoben wird, haben Sie das Problem genau ermittelt.quelle
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 SieReveal in Elements panel
.