Réinitialiser le formulaire HTML à l'aide de jQuery
-
Utilisez la méthode
trigger()pour réinitialiser le formulaire HTML à l’aide de jQuery -
Créez un objet de formulaire jQuery et utilisez la méthode
reset()de JavaScript pour réinitialiser le formulaire HTML
jQuery n’a pas de méthode comme la méthode JavaScript reset(), mais nous pouvons utiliser la méthode trigger() de jQuery pour réinitialiser le formulaire HTML. Ce tutoriel montre comment utiliser la méthode trigger() pour réinitialiser le formulaire HTML dans jQuery.
Utilisez la méthode trigger() pour réinitialiser le formulaire HTML à l’aide de jQuery
La méthode trigger() peut déclencher un gestionnaire d’événements spécifié sur les éléments sélectionnés. Nous pouvons utiliser cette méthode avec le paramètre reset pour réinitialiser le formulaire HTML.
La syntaxe de la méthode trigger() pour réinitialiser le formulaire est :
$("Form").trigger("reset");
Où le Form est un sélecteur pour le formulaire, il peut être un id, une classe, ou le mot-clé form.
Essayons un exemple :
<!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>
Le code ci-dessus réinitialisera le formulaire au clic du bouton. Voir la sortie :
Créez un objet de formulaire jQuery et utilisez la méthode reset() de JavaScript pour réinitialiser le formulaire HTML
Une autre méthode pour réinitialiser le formulaire dans jQuery consiste à créer un objet jQuery du formulaire et à le réinitialiser avec la méthode JavaScript reset(). La syntaxe de cette méthode est :
$("#DemoForm")[0].reset()
Où [0] convertira l’objet jQuery en un objet JavaScript, puis appliquera la méthode reset().
Voir l’exemple suivant pour cette méthode :
<!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>
Le code ci-dessus convertira l’objet jQuery en JavaScript et réinitialisera le formulaire à l’aide de la méthode reset(). Voir la sortie :
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