HOWTO · jQuery
HTML-Formular mit jQuery zurücksetzen
Dieses Tutorial zeigt, wie Sie ein HTML-Formular mit jQuery zurücksetzen.
Auf dieser Seite
jQuery hat keine Methode wie die JavaScript-Methode reset(), aber wir können die Methode trigger() von jQuery verwenden, um das HTML-Formular zurückzusetzen. Dieses Tutorial zeigt, wie Sie die Methode trigger() verwenden, um das HTML-Formular in jQuery zurückzusetzen.
Verwenden Sie die trigger()-Methode, um das HTML-Formular mit jQuery zurückzusetzen
Die Methode trigger() kann einen bestimmten Event-Handler auf ausgewählten Elementen auslösen. Wir können diese Methode mit dem Parameter reset verwenden, um das HTML-Formular zurückzusetzen.
Die Syntax für die Methode trigger() zum Zurücksetzen des Formulars lautet:
$("Form").trigger("reset");
Wo das Form ein Selektor für das Formular ist, kann es eine ID, eine Klasse oder das Schlüsselwort Form sein.
Versuchen wir es an einem Beispiel:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ResetForm Using JQuery</title>
</head>
<body>
<form action="" method="post" id="DemoForm">
<label>Name:</label>
<input type="text" name="name">
<br><br>
<label>ID:</label>
<input type="text" name="id">
<br><br>
<label>Address:</label>
<input type="text" name="address">
<br><br
<label>Salary:</label>
<input type="number" name="salary">
<input type="submit" value="Submit">
</form>
<br>
<button type="button" id='ResetButton'>Reset Form</button>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("#ResetButton").click(function(){
$("#DemoForm").trigger("reset");
});
});
</script>
</body>
</html>
Der obige Code setzt das Formular beim Klicken auf die Schaltfläche zurück. Siehe Ausgabe:
Erstellen Sie ein jQuery-Formularobjekt und verwenden Sie die reset()-Methode von JavaScript, um das HTML-Formular zurückzusetzen
Eine andere Methode zum Zurücksetzen des Formulars in jQuery besteht darin, dass wir ein jQuery-Objekt des Formulars erstellen und es mit der JavaScript-Methode reset() zurücksetzen können. Die Syntax für diese Methode lautet:
$("#DemoForm")[0].reset()
Wobei [0] das jQuery-Objekt in ein JavaScript-Objekt umwandelt und dann die reset()-Methode anwendet.
Siehe folgendes Beispiel für diese Methode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reset Form Using JQuery</title>
</head>
<body>
<form action="" method="post" id="DemoForm">
<label>Name:</label>
<input type="text" name="name">
<br><br>
<label>ID:</label>
<input type="text" name="id">
<br><br>
<label>Address:</label>
<input type="text" name="address">
<br><br
<label>Salary:</label>
<input type="number" name="salary">
<input type="submit" value="Submit">
</form>
<br>
<button type="button" id='ResetButton'>Reset Form</button>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("ResetButton").click(function() {
$("#DemoForm")[0].reset()
});
});
</script>
</body>
</html>
Der obige Code konvertiert das jQuery-Objekt in JavaScript und setzt das Formular mit der Methode reset() zurück. Siehe Ausgabe:
