Restablecer formulario HTML usando jQuery
-
Use el método
trigger()para restablecer el formulario HTML usando jQuery -
Cree un objeto de formulario jQuery y use el método
reset()de JavaScript para restablecer el formulario HTML
jQuery no tiene un método como el método reset() de JavaScript, pero podemos usar el método trigger() de jQuery para restablecer el formulario HTML. Este tutorial demuestra cómo usar el método trigger() para restablecer el formulario HTML en jQuery.
Use el método trigger() para restablecer el formulario HTML usando jQuery
El método trigger() puede activar un controlador de eventos específico en elementos seleccionados. Podemos usar este método con el parámetro reset para restablecer el formulario HTML.
La sintaxis del método trigger() para restablecer el formulario es:
$("Form").trigger("reset");
Donde el Form es un selector para el formulario, puede ser un id, una clase o la palabra clave form.
Probemos un ejemplo:
<!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>
El código anterior restablecerá el formulario al hacer clic en el botón. Ver salida:
Cree un objeto de formulario jQuery y use el método reset() de JavaScript para restablecer el formulario HTML
Otro método para restablecer el formulario en jQuery es que podemos hacer un objeto jQuery del formulario y restablecerlo con el método reset() de JavaScript. La sintaxis de este método es:
$("#DemoForm")[0].reset()
Donde [0] convertirá el objeto jQuery en un objeto JavaScript y luego aplicará el método reset().
Vea el siguiente ejemplo para este método:
<!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>
El código anterior convertirá el objeto jQuery a JavaScript y restablecerá el formulario utilizando el método reset(). Ver salida:
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