Limpiar todas las cajas de texto de una pagina con Jquery

closeHola! hace 6 years 5 months 9 days que escribí esta entrada, puede que esta información ya no sea valida en la actualidad, por favor se comprensivo conmigo cuando comentes 🙂

Algunas veces en nuestros desarrollos, necesitamos limpiar todas las cajas de texto, con jquery podemos realizar esta acción con 3 lineas de código fácilmente.

Usaremos la funcion “each” que recorre todos los elementos de un selector y le asignamos el valor “” para dejar en blanco las cajas de texto, el selector sera “:text” esto hace que seleccione solo los elementos tipo “text”

El codigo para limpiar todas las cajas de texto es el siguiente:

	$(":text").each(function(){	
			$($(this)).val('');
	});

ACTUALIZACION

Alfonso en un comentario nos sugiere realizarlo en una sola linea : $(“:text”).val(”);

Espero que les sea de utilidad.

You may also like...

14 Responses

  1. alfonso dice:

    Hola mira eso es muy sencillo de hacer no necesitas la funcion each por q jquery con el selector $(“:text”) seleciona todos los input de tipo text asi q con una sola linea se limpia asi $(“:text”).val(‘ ‘); no entiendo por q el uso del each a menos que vallas a validar los campo en fin si es asi te puedo pasar una simple funcion para validar con jquery

    • Jodacame dice:

      Hola alfonso tienes toda la razón, no se que me ha pasado! … creo que por estar Copy/Paste de mi código… y como tu lo has dicho yo recorría todo los Input y realizaba una validación antes.

      Agregare tu comentario en la entrada.

      Saludos.

  2. abner dice:

    AMigos… en que parte del codigo incerto esta linea? graxias

  3. Genial me sirvio de mucho, gracias por el tip saludos

  4. Cristopher dice:

    Estimado y solo deseo hacer las cajas que estan dentro de un div, es decir, limpiar cajas que se encuentran dentro de un modal de jquery?

    • jodacame dice:

      Hola crisopher, si deseas hacerlo solo a las cajas de un div, este div debe tener un ID o una clase unica y se hace de la siguiente manera:

      Para un div con ID:
      $(“:text”,$(“#DIV_ID”)).val(”);

      Para un div con CLASS unica:
      $(“:text”,$(“.NOMBRE_CLASE”)).val(”);

      Otra alternativa es ponerle una clase unica a los inputs que quieres limpiar ejemplo:

      Luego haces:

      $(“.limpiar”).val(“”);

      Saludos y gracias por visitar mi blog!

  5. jorgito dice:

    mejor aun:
    usar xhtml correcto, formularios y el input type reset

    • jodacame dice:

      Hola jorgito, gracias por tu comentario… este post es para otro tipo de funcionalidades de la aplicaciones, ejemplo: limpiar las cajas dimanicamente sin que el usuario deba hacer click en un botón ya sea por una validación o un evento externo. es muy util cuando queremos darle un poco mas de UX a nuestras aplicaciones y no irnos por los desarrollos tradicionales.

      Saludos y gracias por visitar mi blog.

      PD: lo que dices es valido como el xhtml 🙂

      • Guest dice:

        hay caso que input type reset no es eficiente x por ejemplo
        si carga la pagina con codigo php de este modo
        <input type='text' name='ej' id='ej' value='’/>
        no te limpia el campo. siempre te vuelva 1 en conclusion
        el tipo reset solo regresa el formulario al estado que carga la pagina no lo limpia en si. si la pagina se carga con datos en los campo. la opcion reset devuelva los datos iniciar no los campos vacio en si.

        saludo desde haiti!

      • Bruno dice:

        en base de este ejemplo desarrolle una funccion mas amplio 🙂
        x=’id_objecto’;
        function Limpiar(x){

        $(“#”+x+” input[type=text]”).each(function(){

        $($(this)).val(”);

        });

        $(“#”+x+” input[type=radio]”).each(function(){

        $($(this)).attr(‘checked’,false);

        });

        $(“#”+x+” input[type=checkbox]”).each(function(){

        $($(this)).attr(‘checked’,false);

        });

        $(“#”+x+” textarea”).each(function(){

        $($(this)).html(”);

        });

        $(“#”+x+” select option[value=”],#”+x+” select option[value=’null’]”).attr(“selected”,true);

        }

    • Bruno dice:

      hay caso que input type reset no es eficiente x por ejemplo
      si carga la pagina con codigo php de este modo

      no te limpia el campo. siempre te vuelva 1 en conclusion
      el tipo reset solo regresa el formulario al estado que carga la pagina no lo limpia en si. si la pagina se carga con datos en los campo. la opcion reset devuelva los datos iniciar no los campos vacio en si.

      saludo desde haiti!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *