Función para resetear formulario HTML con jQuery

Hola a todos, es esta ocasión les traigo el código de una función para resetear los valores por default en un formulario HTML utilizando la librería jQuery.

El formulario que vamos a utilizar para el ejemplo es el siguiente.


<form id="frminformacion">
  <label> Text: </label>
  <input type="text" name="texto" /> <br/>
  <label> Radio button: </label>
  <input type="radio" name="opcion" value="f" /> Femenino
  <input type="radio" name="opcion" value="m" /> Masculino <br/>
  <label> Checkbox: </label>
  <input type="checkbox" name="check" value="f" /> Femenino
  <input type="checkbox" name="check" value="m" /> Masculino <br/>
  <label> Password: </label>
  <input type="password" name="password" /> <br/>
  <input type="hidden" name="oculto" value="hola" /> <br/>
  <label> Select: </label>
  <select id = "seleccion" name="seleccion">
     <option value = "0" > Elige una opcion </option>
     <option value = "1" > Primero </option>
     <option value = "2" > Segundo </option>
     <option value = "2" > Tercero </option>
  </select> <br/>
  <label> Textarea </label>
  <textarea> </textarea>
  <input type="button" id="limpiar" value="limpiar"/>
</form>

Bueno ahora comenzamos con el codigo de la funcion que se encargara de resetear todos los controles del formulario. Dicha funcion va a recibir un parametro que será el id del formulario a resetear.


function limpiarformulario(formulario){
   /* Se encarga de leer todas las etiquetas input del formulario*/
   $(formulario).find('input').each(function() {
      switch(this.type) {
         case 'password':
         case 'text':
         case 'hidden':
              $(this).val('');
              break;
         case 'checkbox':
         case 'radio':
              this.checked = false;
      }
   });

   /* Se encarga de leer todas las etiquetas select del formulario */
   $(formulario).find('select').each(function() {
       $("#"+this.id + " option[value=0]").attr("selected",true);
   });
   /* Se encarga de leer todas las etiquetas textarea del formulario */
   $(formulario).find('textarea').each(function(){
      $(this).val('');
   });
}

Ahora el código que tenemos que utilizar para implementar la función es el siguiente, en este caso al botón del formulario le agregamos el evento click para que cuando ocurra se mande a llamar a la función que reseteara el formulario de la siguiente forma

$("#limpiar").click(function(){
   limpiarformulario("#frminformacion");
});

eso es todo, espero que les sirva, no se olviden de comentar.

2 comentarios en “Función para resetear formulario HTML con jQuery”

  1. Mario Vial dice:

    Gracias! funciona perfecto!

  2. Juan de Dios José Vega Landa dice:

    Está chevere, pero no me funciona con el control select. A que se podrá deber?

Deja un comentario