Manejar elementos de formulario con jQuery

Los formularios son una estructura básica de cualquier sitio web, es común encontrarlos para solicitar información del usuario que una vez en el servidor es utilizada con distintos propósitos. Si bien los elementos que los componen son fáciles de colocar y desarrollar, su validación resulta un dolor de cabeza para muchos y desgraciadamente es en este proceso donde más contacto se tiene con jQuery.

Debido a que cada elemento que conforma un formulario tiene propiedades especiales e incluso algunas de carácter único, jQuery se encargó de incorporar una serie de funciones para llevar a cabo correctamente actividades básicas como la obtención y establecimiento de valores, su serialización y la selección de elementos basada en las propiedades del formulario.

Elementos del formulario

Cuando utilizamos el término “elemento de formulario” para nombrar a un miembro de nuestro DOM, nos estamos refiriendo a aquellos elementos que aparecen dentro de un formulario, generalmente delimitado por las etiquetas “form”. Dichos elementos deben contener un nombre y atributos con valores que se envian al servidor como parámetros al momento de realizar una petición, comúnmente llamada con el término anglosajón “submit”.

El manejo de estos elementos mediante Javascript básico puede resultar bastante complicado y abrumador, tenemos que recurrir constantemente a funciones de obtención mediante identificadores, como es el caso de “getElementById”, la validación debe someterse a expresiones regulares, la obtención de atributos se complica y debido a ciertos estatutos establecidos para ignorar a elementos “disabled” puede que el resultado obtenido no sea el deseado.

Obtener valores

Una vez identificado lo que es un elemento de formulario, pasemos a realizar una de las operaciones con formularios más básicas, acceder al valor de un elemento mediante jQuery.

Para poder lograr esto utilizaremos el comando “val()”, el cual se encarga de devolver el valor de propiedad del primer elemento que coincide con el selector y es establecido en el conjunto combinado. En el caso de un elemento sencillo nos regresará un valor únicamente, mientras que cuando el elemento es de selección múltiple nos regresa una matriz con todas las selecciones.

Este comando aunque es muy útil, tiene una serie de limitaciones por lo que tenemos que ser cautelosos al momento de utilizarlo. Si el primer elemento en el conjunto envuelto no es parte de un formulario, nos regresa un error de JavaScript, esto se puede dar si manejamos clases en los selectores y por alguna razón uno de los elementos esta fuera del formulario.

También hay que aclarar que este comando no hace distinción entre los estados activado o desactivado de casillas de verificación y botones de radio, y devolverá el valor de las casillas de verificación o botones de radio tal como se define por su atributo de valor, sin importar si están seleccionados a no.

Radio buttons

En el caso de los botones de radio, el poder de los selectores de jQuery en combinación con el comando “val()” nos ayuda a salir adelante al momento de querer realizar operaciones con ellos.

Si por ejemplo tuviéramos un formulario con un grupo de “radio buttons” los cuales comparten un atributo “name” de nombre “opcionesRadio”, para poder seleccionar sus valores haríamos una expresión como la siguiente:

jQuery('[name=opcionesRadio]:checked').val()

Esta expresión nos devuelve únicamente el valor de la opción del grupo que esta seleccionada. El uso de esta expresión resultará más sencillo que recorrer cada uno de los botones con Javascript, en busca del elemento que se encuentra marcado.

Checkboxes

Debido a que el comando “val()” sólo considera al primer elemento de un conjunto envuelto, no es tan útil para los grupos conformados por casillas de verificación, donde pueden existir más de un elemento marcado.

Para esta ocasión tendremos que recurrir a la serialización si queremos obtener los valores.

Establecer valores

Otra operación común que vamos a realizar es establecer el valor de un elemento de formulario. El comando “val()” también se puede utilizar con este fin, la única diferencia es que para llevar a cabo la asignación debemos proporcionar un valor como parámetro, dicho parámetro debe ser una cadena, la cual va a establecer el valor de propiedad del elemento o conjunto de elementos que se agruparon mediante el selector.

Al igual que en el caso anterior, esta función tiene sus limitaciones, ya que por ejemplo no puede establecer varios valores en una lista de selección múltiple.

Seleccionar casillas

Otra forma de utilizar el método “val()”, es para seleccionar las casillas o los radios de un grupo de elementos. La sintaxis de esta variante del comando “val()” cambia en el parámetro que proporcionamos, en esta ocasión debe de ser un arreglo de valores, los cuales se utilizarán para determinar que elementos deben de ser seleccionados.

jQuery('input').val(['uno','dos','cuatro']);

Con esta declaración buscamos todos los elementos de tipo “input” en la página, y todas las casillas o radio botones que coincidan con los valores de entrada especificados, serán marcados y seleccionados.