Preguntas frecuentes sobre jQuery y los INPUTs

Me encontré con varias preguntas concernientes a jQuery y los elementos INPUTs. Entonces decidí escribir este artículo para aquellos que les sirva el zapato.

¿Cómo seleccionar elementos INPUTs por tipo?

La primera frase de la pregunta nos dice la mitad de como deberíamos de escribir el selector. Primero, sabemos que nuestra elementos a seleccionar son INPUTs, por lo cual deberíamos de comenzar a escribir algo así:

var elementos = $('input');

Sin embargo, si queremos filtrar nuestros INPUTs por algún tipo tan solo debemos de agregar el siguiente filtro y ¡listo!

var submits = $('input[type="submit"]');
var checkboxes = $('input[type="checkbox"]');
var texts = $('input[type="text"]'); 

Y así sucesivamente para cada tipo, solo necesitas cambiar el valor de type para cada selector.

¿Cómo saber el tipo de un elemento INPUT?

La respuesta a esta pregunta es muy sencilla por lo cual no se necesita dar muchas explicaciones. Como el tipo de un elemento INPUT se almacena en el atributo TYPE tan solo necesitamos escribir los siguiente:

var tipo = $('#elemento14').attr('type');

Este código seleccionará el elemento con ID elemento14 y devolverá su tipo.

¿Cómo obtengo el valor de un elemento INPUT?

Esta pregunta suele surgir cuando uno aprende a sacar el texto de un elemento con .text() o el html con .html(). Sin embargo, para los INPUTs es diferente, debemos de utilizar el método .val(). Por ejemplo, si queremos sacar el username puesto en un INPUT text podemos hacerlo así:

var username = $('#username').val();

Este código seleccionará el elemento con ID ‘username’ y devolver su valor.

¿Cómo seleccionar ‘todos’ los INPUTs, incluido los SELECTs, BUTTONs, TEXTAREAs…?

Esto es bien sencillo, tan solo necesitas utilizar un filtro  prediseñado para esto.

var username = $(':input');

Al ejecutar este selector obtendrás todo los tipos de INPUTs diferentes, y todos los SELECTs, BUTTONs y TEXTAREAs.

¿Has tenido otras dudas o preguntas sobre INPUTs y formularios? ¡Utiliza los comentarios para expresarte!