En ocasiones, tenemos formularios a los que queremos aplicar validación a algunos campos, y dependiendo de la acción tomada, podemos necesitar vaciar todo el contenido del formulario que el usuario haya rellenado. Si tenemos un formulario de 3 o 4 campos, podemos hacerlo a mano de forma rápida, del modo:
$(”#miInput”).val(”);
Pero si estamos trabajando con un formulario grande, con varios tipos de campos, algo tan simple nos puede tomar mucho tiempo.Buscando por internet y hechandole un ratillo, me he creado esta función (he comentado todas las líneas para que todo esté más claro):
function limpiaForm(miForm) {
// recorremos todos los campos que tiene el formulario
$(’:input’, miForm).each(function() {
var type = this.type;
var tag = this.tagName.toLowerCase();
//limpiamos los valores de los campos…
if (type == ‘text’ || type == ‘password’ || tag == ‘textarea’)
this.value = “”;
// excepto de los checkboxes y radios, le quitamos el checked
// pero su valor no debe ser cambiado
else if (type == ‘checkbox’ || type == ‘radio’)
this.checked = false;
// los selects le ponesmos el indice a -
else if (tag == ’select’)
this.selectedIndex = -1;
});
}
La función recibe un objeto de JQuery que representa el formulario que queremos vaciar. Supongamos que el formulario tiene como id “Formulario1″, lo haríamos de la siguiente forma:
limpiaForm($(”#Formulario1″));
… y todo el formulario limpio.
Incluso puede ser más fácil, si sólo tuviéramos inputs de texto, y algún textarea, podríamos hacer:
$(”#Formulario1 input, #Formulario1 textarea”).val(”);
Otra clara demostración de lo mal acostumbrado que nos tiene JQuery!
Pero aún más simple…
$(”#Formulario1″)[0].reset();
Este blog es un blog personal. En el postearé manuales, recursos, cualquier cosa que me parezca interesante sobre diseño web, programación web, maquetación, photoshop, y algo de linux (ubuntu y linux mint). Si lo deseas, puedes ponerte en contacto conmigo para cualquier sugerencia, critica, agradeciminto, cualquier cosa referente a este blog.
pablo
July 16th, 2010 at 3:51 pm
$(’form’)[0].reset();
admin
July 16th, 2010 at 10:13 pm
@pablo: pues mira, ni se me había ocurrido. A veces, siempre hay una solución más simple (aunque esta vez ha sido exagerado!). Lo agrego, gracias
Software de Historia Clinica
December 16th, 2011 at 9:51 pm
Excelente informacion en solo un par de minutos de seguir tu guia lo implemente, buena explicacion gracias
Rocio
March 7th, 2012 at 3:18 am
Pero esto como se agrega al HTML? eso me confunde un poco con Jquery. Deberias hacer un ejemplo sencillo..
Emmanuel
March 13th, 2012 at 6:40 pm
YO LO HARÍA ASÍ:
function limpiaForm(miForm) {
// recorremos todos los campos que tiene el formulario
$(’:input’, miForm).each(function() {
var type = this.type;
var tag = this.tagName.toLowerCase();
switch (type) {
case “checkbox”:
this.checked = false;
break;
case “radio”:
this.checked = false;
break;
default:
this.value = “”;
}
switch (tag) {
case “textarea”:
this.value = “”;
break;
case “select”:
this.selectedIndex = -1;
break;
default:
;//No hago nada
}
});//FIN EACH
}//FIN FUNCIÓN