Wie kann ich das Formular über JavaScript zurücksetzen (löschen)?

123

Ich habe es versucht, $("#client.frm").reset();aber es funktioniert nicht. Wie kann ich das Formular über jQuery zurücksetzen?

javascript jquery Akuzma
quelle
Mögliches Duplikat von stackoverflow.com/questions/680241/blank-out-a-form-with-jquery
svk
6
Hinweis: Löschen und Zurücksetzen sind zwei verschiedene Dinge. Reset ( .reset()) setzt die Werte auf die ursprünglichen Werte im HTML zurück. Siehe hierzu die Lösung von Nick Craver weiter unten. "Löschen" bedeutet normalerweise, dass die Werte wieder auf leer / nicht markiert / nicht ausgewählt gesetzt werden. siehe MahmoudS-Lösung.
Luke

Antworten:

258

form.reset() ist eine DOM-Elementmethode (keine im jQuery-Objekt), daher benötigen Sie:

$("#client.frm")[0].reset();
//faster version:
$("#client")[0].reset();

Oder ohne jQuery:

document.getElementById("client").reset();
Nick Craver
quelle
4
Mein Gehirn hat sich gerade erweitert, danke: "Ein jQuery-Objekt ist ein Array-ähnlicher Wrapper um ein oder mehrere DOM-Elemente. Um einen Verweis auf die tatsächlichen DOM-Elemente (anstelle des jQuery-Objekts) zu erhalten, haben Sie zwei Optionen. Das erste (und Die schnellste Methode ist die Verwendung der Array-Notation: $ ("#foo") [0]; // Entspricht document.getElementById ("foo") Die zweite Methode ist die Verwendung der Funktion .get (): $ ("#foo ") .get (0); // Identisch mit oben, nur langsamer." learn.jquery.com/using-jquery-core/faq/…
Andrew
Ich erhalte den nächsten Fehler: TypeError: document.getElementById (...). Reset ist keine Funktion [Weitere Informationen]. Ich benutze das FormValidate-Plugin für das Formular. seine resetForm setzt Form auch nicht zurück = (Irgendwelche Vorschläge?
Eugen Konkov
Eugen, hier müssen Sie, ähnlich wie bei Indiana Jones und The Last Crusade, einen Vertrauenssprung machen. Wenn Sie document.getElementById ('myform'). Reset () aufrufen, wird das Formular tatsächlich gelöscht, obwohl diese Methode anscheinend nicht vorhanden ist. Typische M $ -Unterdeckung.
Newclique
43

Sie können einfach tun:

$("#client.frm").trigger('reset')

user2057484
quelle
1
a Triggerbringt mich in eine neue Welt
Gonatee
17

Die reine JS-Lösung lautet wie folgt:

function clearForm(myFormElement) {

  var elements = myFormElement.elements;

  myFormElement.reset();

  for(i=0; i<elements.length; i++) {

  field_type = elements[i].type.toLowerCase();

  switch(field_type) {

    case "text":
    case "password":
    case "textarea":
          case "hidden":

      elements[i].value = "";
      break;

    case "radio":
    case "checkbox":
        if (elements[i].checked) {
          elements[i].checked = false;
      }
      break;

    case "select-one":
    case "select-multi":
                elements[i].selectedIndex = -1;
      break;

    default:
      break;
  }
    }
}
Mahmoud Saleh
quelle
1
Hier ist die jQuery-Plugin-Lösung, die ungefähr gleichwertig sein sollte. stackoverflow.com/a/24496012/1766230 (Ich habe Ihren selectedIndex = -1Trick benutzt.)
Luke
5
Diese Lösung funktioniert jetzt nicht (im Jahr 2016). Wenn das Formular Standardwerte für Text-, Kennwort- und Textbereichseingaben hat, sollten Sie anstelle von elements [i] .value = "" die Elemente [i] .defaultValue = "" verwenden.
Andrew F.
var field_type = elements[i].type.toLowerCase();
Martynas Januškauskas
@ Andrew: Es kommt darauf an, was du willst. Wenn Sie das Formular nur auf defaultValues zurücksetzen möchten , können Sie einfach reset()das Formularobjekt aufrufen . Der Code hier dient dazu , das Formular zu löschen , anstatt es zurückzusetzen.
Beschützer ein
4

Formular zurücksetzen (löschen) durch Javascript& jQuery:

Beispiel Javascript:

document.getElementById("client").reset();

Beispiel jQuery:

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

$('#client.frm').trigger("reset");
Gaurang P.
quelle
4

Beachten Sie, dass die Funktion form.reset()nicht funktioniert, wenn ein Eingabe-Tag im Formular ein Attribut hatname='reset'

alexbobroff
quelle
2

Versuche dies :

$('#resetBtn').on('click', function(e){
    e.preventDefault();
    $("#myform")[0].reset.click();
}
Hazem_M
quelle
2

Löschen Sie das Formular wie folgt

document.forms[0].reset();

Sie können einfach die Formularelemente innerhalb der Gruppe löschen. indem Sie dies verwenden forms[0].

Nagaraju Vuppala
quelle
1

Verwenden Sie die JavaScript-Funktion reset():

document.forms["frm_id"].reset();
Felix Bagur
quelle
1

Sie könnten Folgendes verwenden:

$('[element]').trigger('reset')
Justlearning
quelle
0

Versuchen Sie diesen Code. Eine Komplettlösung für Ihre Antwort.

    <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(":reset").css("background-color", "red");
});
</script>
</head>
<body>

<form action="">
  Name: <input type="text" name="user"><br>
  Password: <input type="password" name="password"><br>
  <button type="button">Useless Button</button>
  <input type="button" value="Another useless button"><br>
  <input type="reset" value="Reset">
  <input type="submit" value="Submit"><br>
</form>

</body>
</html>
Jaffer Wilson
quelle
-1

Sie können das gesamte Formular mit der Funktion onclick löschen. Hier ist der Code dafür.

 <button type="reset" value="reset" type="reset" class="btnreset" onclick="window.location.reload()">Reset</button>

Die Funktion window.location.reload () aktualisiert Ihre Seite und alle Daten werden gelöscht.

Arjun
quelle