HTML-Formular mit jQuery zurücksetzen
-
Verwenden Sie die
trigger()-Methode, um das HTML-Formular mit jQuery zurückzusetzen -
Erstellen Sie ein jQuery-Formularobjekt und verwenden Sie die
reset()-Methode von JavaScript, um das HTML-Formular zurückzusetzen
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:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook