Ich verwende den folgenden Code, um die Formularfelder zurückzusetzen.

document.getElementById("form1").reset();//form1 is the form id.

Es funktioniert nicht. Ich habe es auch mit JQuery versucht. Auch JQuery funktioniert nicht.

$("#reset").click(function(){
$('form1')[0].reset();
});

Mein HTML-Code ist

<form name="form1" id="form1" method="post">
<h3>Personal Information</h3>
<h4>Name</h4>
<input type="text" id="fname" name="fname" maxlength=50 size=11/>
<input type="text" id="mname" name="mname" maxlength=15 size=8/>
<input type="text" id="lname" name="lname" maxlength=50 size=11/>
<input type="button" id="reset" value="Reset" onclick="Reset()"/>
</form>

Ich verfolge W3Schools. Hier ist meine Geige. Können Sie bitte den Fehler erklären?

7
Lingasamy Sakthivel 29 Nov. 2013 im 16:35

8 Antworten

Beste Antwort

Das Problem ist, dass Sie die ID Ihrer Schaltfläche auf "reset" setzen. Aus diesem Grund wurde Ihre Methode zum Zurücksetzen von Formularen durch das Schaltflächenelement überschrieben. Verwenden Sie einfach eine andere ID für Ihre Schaltfläche.

<form name="form1" id="form1" method="post">

<h3>Personal Information</h3> 

<h4>Name</h4>

    <input type="text" id="fname" name="fname" maxlength="50" size="11" />
    <input type="text" id="mname" name="mname" maxlength="15" size="8" />
    <input type="text" id="lname" name="lname" maxlength="50" size="11" />
    <input type="button" id="resetBtn" value="Reset" />
</form>

Vermeiden Sie außerdem Inline-Event-Handler. Binden Sie Ereignisse in Ihr eigentliches Skript.
Siehe diese Geige.

17
danronmoon 22 Jän. 2020 im 15:58

Ok, siehe meine neue jsfiddle: http://jsfiddle.net/ty9rU/17/ Also habe ich die Schaltfläche in reset_btn umbenannt

Grundsätzlich hatten Sie ein Element namens "Zurücksetzen" im Formular, und das verursachte das Problem.

0
stilliard 29 Nov. 2013 im 12:54

Versuchen Sie dies einfach: Zurücksetzen

<input type="reset" value="Reset"/>
3
Ankit Tyagi 29 Nov. 2013 im 12:38

Ich habe Ihre Geige aktualisiert.

Warum Vanille js nicht funktioniert:

Du hast nicht ...

document.getElementById("form1").reset();//form1 is the form id.

... innerhalb einer Reset-Funktion. Sie könnten dies tun:

function Reset() {
    document.getElementById("form1").reset();//form1 is the form id.
}

Warum jQuery nicht funktioniert:

Sie müssen nicht alles tun, was Sie tun. Es ist viel einfacher als das. Schauen Sie sich auch Ihren 'form1'-Selektor an. Sie sollten stattdessen wahrscheinlich '# form1' hinzufügen. Die Auswahl von jQuery unterscheidet sich von der Funktion getElementByID. Wie Sie wahrscheinlich anhand des Namens annehmen können, ruft die Funktion getElementByID das Element bereits anhand der ID ab. Bei jQuery müssen Sie diese Dinge jedoch angeben. Außerdem benötigen Sie das onClick-Attribut mit jquery nicht wirklich.

0
mborg 29 Nov. 2013 im 12:53

Wenn Sie nur das Formular zurücksetzen möchten, können Sie Folgendes versuchen:

<input type="reset" id="reset" value="Reset" onclick="this.form.reset();"/>
1
silverbeak 29 Nov. 2013 im 12:43

Mit jQuery lautet der richtige Selektor:

$('#form1') // Select with ID

ODER

$('form[name=form1]') // Select with name
1
Elorfin 29 Nov. 2013 im 12:49

Sieht so aus, als ob Sie $ ('form1') wie in einem Element mit dem Tag-Namen form1 auswählen, während Sie es tatsächlich anhand der ID auswählen möchten:

$('#form1')[0].reset();
2
stilliard 29 Nov. 2013 im 12:41

Ich habe endlich mein Problem gelöst. Das Problem ist "id=reset". Weil es die reset Methode überschreibt. Ich habe es in id="reset1" geändert. Jetzt funktioniert es

3
Lingasamy Sakthivel 29 Nov. 2013 im 12:49