Restablecer hace que todo vuelva a su estado original. JQuery no tiene un método reset(), pero JavaScript nativo sí. Entonces, convertimos el elemento jQuery en un objeto JavaScript.
JavaScript reset(): El método reset() restablece los valores de todos los elementos en un formulario (lo mismo que hacer clic en el botón Restablecer).
- Sintaxis para el botón de reinicio de JavaScript:
-
// type-1 <input type="reset">
-
// type-2 <input type="button" onclick="this.form.reset();">
-
// type-3 <input type="button" onclick="formname.reset();">
El botón en sí reinicia el formulario pero, el tipo 1 y el tipo 2, el botón de reinicio debe estar dentro del formulario y el tipo 3 puede estar fuera o dentro.
Pero un botón de reinicio es una opción mucho mejor. (tipo 1)
-
<input type="reset">
- Sintaxis para restablecer():
formObject.reset()
- Sintaxis para convertir el elemento jQuery en un objeto JavaScript.
$(selector)[0].reset()
o
$(selector).get(0).reset()
Si no queremos convertir el elemento jQuery en un objeto JavaScript, podemos usar el trigger() .
Como método trigger() activa el evento especificado y el comportamiento predeterminado de un evento (como el envío de un formulario) para los elementos seleccionados.
Sintaxis$(selector).trigger(event, eventObj, ...)
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("button").click(function() {
//$("#d").trigger("reset");
//$("#d").get(0).reset();
$("#d")[0].reset()
});
});
</script>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h4>
Click on "Submit" to submit and
remaining resets to get form to original state.
</h4>
<form id="d" action="/cgi-bin/test.cgi" name="geek">
<table cellspacing="0" cellpadding="3" border="1">
<tr>
<td align="center">Username</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<tr>
<td align="center">Email</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<tr>
<td align="center">Password</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td align="center"></td>
<td>
<input type="submit" value="Submit" />
</td>
</tr>
<tr>
<td align="center"></td>
<td>
<input type="reset" value="reset button" />
</td>
</tr>
</table>
</form>
<br>
<input type="button"
value="reset() outside form"
onclick="geek.reset();" />
<button>resetby jQuery</button>
</center>
</body>
</html>
Producción
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .