Acciones en buttons con jQuery

Como se han apreciado en anteriores artículos en el blog sobre jQuery, se ha observado que provee métodos para asociar controladores de eventos (event handlers) a selectores. En este artículo se van a tratar de documentar y explicar, diferentes acciones que se pueden realizar en los elementos button de una página web, gracias a los eventos explicados en el anterior artículo “Eventos en jQuery.

Como en anteriores artículos se dispone al final del post de un ejemplo en línea, con todos los ejemplos para que se pueda practicar con ellos de manera online, ver su código a través de la inspección de código de los navegadores web y además se proporciona un enlace al código fuente del ejemplo, por si estáis interesados en descargar el código para “jugar” con él, en vuestros ordenadores de manera local.

ACCIONES EN ELEMENTOS BUTTON

A continuación se puede observar en la siguiente captura un ejemplo de un formulario de perfil de usuario (diseñado con Bootstrap), el cual al final del mismo dispone de una serie de botones para realizar diferentes acciones:

Se detallan las acciones que realizan los botones y posteriormente se detalla el código desarrollado:

  • Botón Cancelar: refresca la página por completo inicializando todos los elementos a su estado por defecto.
  • Botón Limpiar: resetea todos los campos del formulario entrando uno por uno, en caso que el formulario esté con errores, también resetea el efecto del formulario con css.
  • Botón Limpiar 2: resetea todos los campos del formulario con otro método diferente al botón de limpiar, a nivel de usuario realiza las mismas funciones que el anterior botón.
  • Botón Actualizar: realiza la acción de submit del formulario. No está implementado en el ejemplo al ser solo una plantilla de front-end pero en este botón se debería almacenar la información en la base de datos de nuestra aplicación.

 

ACCIONES EN EL BOTÓN CANCELAR

A continuación se observa una imagen con el código desarrollado para la acción que realiza dicho botón cuando el usuario pulsa sobre él (realiza clic).

El código de jQuery es bastante simple, se configura el evento “click”, sobre el elemento con id “btnCancel”, posteriormente se llama a la función “location.reload(true);” para que el navegador recargue la página de forma automática. Atención se debe tener en cuenta que habitualmente se  inserta la función “location.reload();” pero se recomienda que se inserte el true dentro de los paréntesis, ya que, en algunos navegadores como Mozilla Firefox, sin esta instrucción no realizará la acción de recargar la página por completo.

ACCIONES EN LOS BOTONES DE LIMPIAR

Como se puede observar en la plantilla de perfil de usuarios, que se puede apreciar en el ejemplo, se disponen dos botones de “limpiar”. Este desarrollo de ejemplo, obviamente no tiene sentido para un uso habitual de diseño y no se debería insertar bajo ningún concepto en una instalación final en un cliente, pero en el artículo se ha implementado para aclarar ciertas formas de desarrollar las acciones de dichos botones en jQuery.

Botón Limpiar

En el botón limpiar se ha creado el código que se comenta a continuación para realizar la acción del botón: cuando el usuario pulsa sobre el botón, éste llama a una función que se ha creado como “cleanFormData” pasándole como parámetro el identificador del form. Este método crea una variable i de tipo fecha (al final de la sección se detalla para que se crea esta variable), a continuación se busca, uno a uno, todos los elementos del form que sean de tipo input y a través de un switch, se determina si es de un tipo (email, text, radio…) o de otro y en función del tipo que sea, el método o función realiza las acciones indicadas dentro de cada caso. En el caso de ser de tipo emailtexthidden (oculto), limpia el campo de input pasando al valor del campo un string vacío, se resetea la clase de error (en caso que el input disponga de una) y se resetea el contenido del span (donde se detalla el error del campo al usuario). Adicionalmente se ha creado un caso de tipo checkbox y radio para dejar en su estado por defecto el campo de ese tipo, si existiese. En el formulario del ejemplo no hay disponible ningún input de este tipo.

En la misma función y posterior a la búsqueda de los inputs, se buscan los elementos select del form, en este caso se inicializa el valor del select al elemento con valor cero, es decir, el primer elemento de la lista desplegable (en el ejemplo es la opción “Elija un idioma”). Es importante que ese valor exista en el html donde están los selects, porque en el caso que no exista, el select no se resetearía a ese valor y se quedaría con el último seleccionado por el usuario.

A continuación se buscan los elementos textarea del form y se resetea el campo pasándole un string vacío con la línea de código $(this).val(”);

Finalmente y recuperando el punto que se había indicado que se explicaría al final, se crea una nueva variable j solicitando una nueva fecha, se crea un alert restando la variable j a la i para determinar el tiempo que ha tardado en realizarse esta función. Este alert sirve para que se pueda apreciar la diferencia de tiempo entre el botón Limpiar y el botón Limpiar 2, en el que también habrá otro alert, de esta manera se podrá apreciar cual de las dos funciones es más eficiente.

Botón Limpiar2

En el botón Limpiar2 se realizan a nivel de usuario las mismas acciones que en el botón anterior, pero a nivel de desarrollador se van a notar algunos “pequeños” cambios:

Se ha creado una nueva función llamada cleanFormData2 donde también se le pasa como parámetro un identificador del form de la web deseada, en el caso de la llamada se pasa el id “#profileForm”. En la función se puede observar de nuevo las variables, que como se ha comentado en el anterior botón, se usan para determinar el tiempo que tarda en realizarse el método.  A continuación, se emplea  this.reset() para todos los elementos del formulario, a diferencia de la anterior función, se resetean todos los campos sin realizar búsquedas por tipo, por lo que se puede afirmar que este método es más eficiente que el anterior, en el ejemplo quizás no se puede apreciar mucho la diferencia pero si se tuviera una web con 10000 inputs, 2000 selects, etc., se observaría que esta segunda función es más eficiente. Finalmente se crea un switch para personalizar acciones sobre los forms de forma personalizada, en el caso del form del ejemplo, se elimina la clase que modifica en rojo los campos del formulario y se elimina el contenido de los span.

VALIDACIÓN DE INPUTS

Se ha realizado una modificación en la validación de los campos de nombre, apellidos, título y email, respecto al artículo “Validación de campos en jQuery“. A través de jQuery se validan si estos campos están vacíos o si el valor introducido, por ejemplo, en el campo email es un email correcto. Además el botón de “Actualizar” no se activa hasta que estos campos han sido rellenados correctamente por el usuario. En la siguiente captura se puede apreciar la clase css personalizada para insertar en rojo los inputs incorrectos además de ver el formulario como podría apreciarlo un usuario.

En la siguiente captura se dispone del código desarrollado para la validación de los campos observados en la anterior captura:

 

EJEMPLO EN LÍNEA

Se crea el siguiente enlace para que se pueda probar en la web los ejemplos comentados en el artículo. Para ello simplemente pulsar sobre el siguiente botón y la página se redirige a la web del ejemplo, sin necesidad de tener que descargarlo.

VER EL EJEMPLO EN LÍNEA

Además también se adjunta el fichero comprimido con los ejemplos utilizados en el post, para los que prefieren practicar de manera local en sus pc’s: acciones en botones con jQuery. En próximos artículos se añadirán otras plantillas de contacto, plantillas de identificación de usuarios y password, entre otras.

 

En los siguientes posts de jQuery se detallarán otros elementos, en particular se entrará en más detalle en la palabra clave this, recordar que this es una palabra clave especial que hace referencia al objeto en donde el método está siendo invocado. No os lo perdáis.

Se recuerdan los artículos relacionados sobre JQuery:

 
Un saludo.

Deja un comentario

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