Resetear un formulario con jquery

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:


$(

Trackback URL

, , , ,

  1. Ralph Moran
    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.

  2. kdemon
    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.

  3. Pau Sanchez
    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

  4. Pedro Julio
    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

  5. Pau Sanchez
    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!

  6. Wesker
    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

  7. pikilon
    13/05/2011 at 3:14 am Permalink

    Muchas gracias, estaba harto de tratar con los arrays en javascript para hacer el reset().

  8. Edwin
    13/06/2011 at 7:47 pm Permalink

    Ahora, se puede con un simple: $(this)[0].reset(); ó $(«#formulario»)[0].reset();

  9. Carolina
    28/07/2011 at 11:31 am Permalink

    Muy bueno!!! Muchas gracias por compartir! ^_^

  10. Ronald Blanco
    30/08/2011 at 12:15 pm Permalink

    Gracias, Muy bueno simple y de gran ayuda

  11. Ivan
    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.

  12. AngelFQC
    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.

  13. Alejandro Florencia
    11/11/2011 at 9:17 am Permalink

    Excelente!
    Me late como implementaste
    Saludos Cordiales!
    Alex

  14. karlos rohas
    22/02/2012 at 5:54 pm Permalink

    Muy buen TIP. Gracias.

  15. Jorge
    16/04/2012 at 2:09 pm Permalink

    Gracias por el tip, está muy bueno, es práctico y aplicable :D.

  16. Helmán
    19/04/2012 at 9:06 pm Permalink

    A mi la que me parece corta y funcional es esta:
    (function(){
    $(‘button#submit’).click(function(){
    $(‘input’).val(»);
    });

    })();

  17. Nahum Nuñez
    20/04/2012 at 4:11 pm Permalink

    Saludos.
    Yo lo resolví de esta manera.

    $(«#id_formularioA input[type=reset]»).click();

    Creo que la mejor forma de limpiarlo es con su propio botón reset. (Que debe existir dentro de el código del formulario).
    Mi código es algo similar a esto:

    // Función que ejecuta cuando hago clic en enviar (submit) en el formulario A
    function agregar(fila) {

    // Selecciono el FormularioB para añadirle los datos colocados en el
    // FormularioA, Yo construí una tabla dentro del FormularioB para que
    // sea un visible y organizado.
    $j(«#id_formularioB tbody»).append(‘Algo’);

    // Limpiar el FormularioA
    $j(«#id_formularioA input[type=reset]»).click();

    }

    He probado las indicaciones dadas en el post y en otros que he buscado, pero creo que tengo algunas cosas que interfieren o no las he usado correctamente. como por ejemplo «event.preventDefault();» ya que cuando hago la función $(«#algo»).reset(); me refresca la pagina y pierdo los datos.

    pero si me gustaría aprender a crear mis propias funciones el JQuery como lo hizo el compañero Pau Sanchez y dominar el arte de usar «this» dentro de las funciones.

    Gracias.
    Dios les bendiga.

  18. Mateo
    21/08/2012 at 2:47 pm Permalink

    Muy intersante tu post!

    Quisiera saber si se podria implementar tu codigo en un form con captcha que se valida en la misma pagina a traves de php y no se refresca la pagina gracias a este codigo:

    $(function(){
    $("#idForm").submit(function(){
    $.ajax({
    type:"POST",
    url:"send.php",
    dataType:"html",
    data:$(this).serialize(),
    beforeSend:function(){
    $("#loading").show();
    },
    success:function(DivRespuesta){
    $("#DivRespuesta").html(DivRespuesta);
    $("#loading").hide();
    }
    })
    return false;
    })
    })


    Lo que necesito es que se restee el form si ha sido correctamente enviado, sino, no, ya que no quiero hecer volver a rellenar el form si el usuario no relleno correctamente el captcha. Te estaria muy agradecido si me puedes aportar tu ayuda y sino, tambien.

    Un saludo.

  19. emerino
    09/11/2012 at 3:34 am Permalink

    Es cierto q al llamar a la función reset() de un elemento del DOM (formulario) a través de javascript, itera sobre todos sus elementos y los devuelve a su estado inicial.

    Es por esto que no es necesario utilizar each() para devolver el formulario a su estado inicial, ya que iteraría sobre todos los elementos que se encuentren con el selector «#Formulario» lo cuál no tiene sentido y afecta levemente el rendimiento (si nuestro HTML es correcto, no debería haber más de un elemento con ese id).

    La solución optimizada para realizar esta función utilizando jQuery sería:
    $(«#Formulario»)[0].reset();

    Para hacer reset directamente sobre el objeto de jquery $(«#Formulario») utilizando un plugin:
    // this ya es un objeto de jquery
    jQuery.fn.reset = function () { this[0].reset(); }
    $(«#Formulario»).reset();

    Sólo en el caso de que se quieran devolver varios formularios a su estado inicial, entonces se utilizaría each:
    $(«.formulario»).each(function() { this.reset(); });

    Espero pueda actualizarse la solución descrita para aclarar algunos vacíos en la implementación.

    Saludos!
    Edgar Merino

  20. pedro
    14/05/2013 at 8:13 am Permalink

    Gracias, de gran utilidad

  21. Felix Javier
    13/06/2013 at 5:58 am Permalink

    Muy buen foro, justo lo que estaba buscando. Gracias!

  22. Carolina Madrid
    08/03/2014 at 6:00 am Permalink

    Hola a todos, haber si me puede ayudar estoy haciendo una aplicación y necesito borrar algunos imput ejemplo uno si, uno no, uno si, uno no. Total unos 30 por lo cual tiene que ser uno si, uno no estoy usando el .each pero eso es para recorrer todo el form y depues el this reset pero no me vale para uno si uno no. Gracias

  23. @gumonet
    20/06/2014 at 5:02 pm Permalink

    Excelente Amigo.!

    Saludos

  24. Pepe
    23/04/2015 at 4:38 am Permalink

    Vaya chapuza, este post parece una competición de ñapas.
    Si quieres invocar al método reset del formulario, si en JQuery no lo tienes, tan solo tienes que acceder a ese elemento HTML:

    $(‘#Formulario’)[0].reset();

    Y asunto resuelto. Nada de iterar entre sus hijos, ni otros inventos.

Trackbacks

  1. [...] Resetear un formulario con jQuery [...]

  2. [...] Precisei limpar todos os campos de um form e achei que o jQuery teria algo já pronto, mas não…

  3. [...] na internet encontrei uma solução que parecia ser a mais simples, desenvolvida pelo hermano Pau Sanchez. Porém, encontrei problemas…