Una cosa que se suele hacer bastante en javascript es resetear un formulario, es decir, devolver el formulario a su valor inicial.
Con jquery esto es bastante fácil:
$('#Formulario').each (function(){ this.reset(); });
El tema está en que el código de arriba itera sobre cada elemento que está dentro de form, y llama al método “reset” del DOM de javascript (ojo que no se hace un $(this).reset()). La función “reset” en jquery no existe.
Sería más sencillo si se pudiera hacer $(“#Formulario”).reset() y listo, ¿verdad?. Bueno, por suerte crear esa función únicamente requiere que perdamos 1 minuto programando:
jQuery.fn.reset = function () { $(this).each (function() { this.reset(); }); }
Ahora, una vez definido el código de arriba, ya podemos hacer un reset llamando a “reset”:
$("#Formulario").reset();
Tal vez usar “reset” es demasiado genérico para ser aplicado a cualquier objeto, aunque creo que tiene bastante sentido usar un nombre tan sencillo, pero quien quiera que lo renombre a “resetForm”.
Enlaces de interés:
- Getting started with jquery: interesante echarle un ojo
- Clearing form data: como borrar los datos en un formulario
English
23/07/2009 at 8:33 pm Permalink
Saludos,
Muy buen tip!
Seria bueno mejorarlo para que solo funcion para forms o elementos DOM que acepten reset.
Suerte, hasta luego.
03/11/2009 at 10:39 am Permalink
M es tuve fijando que si limpias o reseteas un form, y estas usando algun campo oculto que por default tiene value=0, entonces le quita el cero, lo peor de esto es que cuando cargo datos desde un grid al formulario y reseteo para crear uno nuevo desde formulario, se queda con el id del registro ultimo en el campo hidden.
Si saben de algunas solucion dejo mi correo: kdemon.r@gmail.com
Tengo una idea vaga de como podria hacerlo, pero podria funcionar.
Seria cuando este recorridendo los campos del formulario, validar que si es hidden entonces me ponga un valor por default como 0.
08/04/2010 at 1:08 am Permalink
@kdemon
Puedes seleccionar únicamente los campos que no sean hidden, o cambiar la función para que ignore los campos hidden:
jQuery.fn.reset = function () {
$(this).each (function() { if (!$(this).is(‘:hidden’)) this.reset(); });
}
NOTA: no lo he probado, pero en teoría debería funcionar
05/05/2010 at 8:47 pm Permalink
Si muy bien,
pero como puedo hacer para resetear solo dos Campos por ejemplo (Password y Password confirmación).
Saludos
06/05/2010 at 12:22 am Permalink
Muy fácil, metes el plugin de reset (que si te das cuenta son 2 lineas) y usas el selector de jQuery con esos dos campos y listo.
Es decir, metes esto en tu código:
jQuery.fn.reset = function () {
$(this).each (function() { this.reset(); });
}
Y luego, ya puedes usar el método “reset” sobre cualquier selector, por lo que harías:
$(‘input [name="passwd"], input [name="passwd2"]‘).reset();
Saludos!
21/10/2010 at 9:24 am Permalink
Muy buena ayuda
Estaba probando algo similar y me econtre con tu foro, gracias por el tip.
Saludos
13/05/2011 at 3:14 am Permalink
Muchas gracias, estaba harto de tratar con los arrays en javascript para hacer el reset().
13/06/2011 at 7:47 pm Permalink
Ahora, se puede con un simple: $(this)[0].reset(); ó $(“#formulario”)[0].reset();
28/07/2011 at 11:31 am Permalink
Muy bueno!!! Muchas gracias por compartir! ^_^
30/08/2011 at 12:15 pm Permalink
Gracias, Muy bueno simple y de gran ayuda
31/08/2011 at 1:34 am Permalink
Por casualidad Google me ha traído a este post buscando precisamente una función para resetear un formulario. El caso es que tu función no me servía además de por el motivo mencionado acerca del checkbox porque mis forms muchas veces tienen “adornos” por el medio, tipo o tabuladores. Así que para esos casos, propongo esta implementación alternativa.
jQuery.fn.reset = function () {
$(this).find(“input, textarea, select”).each (function() {
if ($(this).is(‘:checkbox’)) {
$(this).prop(‘checked’, false);
} else {
$(this).val(”);
}
});
}
Con ella no hace falta que selecciones exactamente el formulario, sino que puedes hacer perfectamente $(document).reset() y se borrarán todos los formularios de la página.
28/10/2011 at 5:17 pm Permalink
Excelente, es lo que andaba buscando.
No he tenido problemas con los input hidden, porque al hacer submit me sigue enviando esos datos.
11/11/2011 at 9:17 am Permalink
Excelente!
Me late como implementaste
Saludos Cordiales!
Alex