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