Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


jQuery change(): Detectar cambios de valor en los elementos de tu web

Vamos a repasar la función jQuery change(), este método detecta el cambio de valor del elemento seleccionado en el DOM de nuestra web.

En definitiva con este método jQuery se puede interactuar con cualquier elemento que contenga un valor y que este valor pueda verse alterado en cualquier momento.

Sintaxis de jQuery change()

Vamos a ver la sintaxis extraída de su web oficial:

Os explico:

  1. selector (obligatorio): Elemento del DOM que comprobamos si cambia de valor.
  2. function (opcional): Función callback que ejecutaremos cuando el elemento cambie de valor.

Vamos a ver mediante unos sencillos ejemplos prácticos su funcionamiento.

Cómo obtener el valor de un select con jQuery change()

Vamos a ver en este primer ejemplo cómo obtener el valor de un select:

En este primer ejemplo he puesto 3 formularios con campos select y un input text, la diferencia entre los 3 radica en cómo voy a realizar la comprobación y asignación del cambio de valor de cada formulario:

  1. Comprobación/asignación de valor por atributo name. En el primer formulario detecto el cambio de valor de un campo select con nombre ‘color1’, saco su valor con un alert y los asigno a un input text con jQuery val().
  2. Comprobación/asignación de valor por atributo id. En segundo formulario detecto que el elemento con id ‘ejemplo2’ cambia de valor, a continuación saco su valor con un alert y lo asigno a un input text con jQuery val().
  3. Comprobación/asignación de valor por atributo class. En tercer formulario detecto como el elemento con class ‘ejemplo3’ ha cambiado de valor, saco su valor con un alert y lo asigno al input text con jQuery val().

Como habéis podido ver los 3 formularios son bien sencillos, os pongo su código HTML:

Obtener el valor de un input text con jQuery change()

En este segundo ejemplo vamos a obtener el valor de un input text y lo haremos como en el ejemplo anterior, de 3 formas diferentes:

En estos 3 ejemplos el método change() se ejecutará una vez hayamos dejado de escribir en el input y hayamos clickado en otra parte de la web:

  1. Comprobación por nombre del input. Compruebo el cambio de valor del input con atributo name ‘nombre1’ y saco su valor en un alert.
  2. Comprobación por id del input. Compruebo el cambio de valor del input con id ‘nombre2’ y muestro su valor en un alert.
  3. Comprobación por class del input. Compruebo el cambio de valor del input con class ‘nombre3’ y saco su valor en un alert.

Solo me queda poneros el código HTML de los 3 formularios:

Cómo obtener el valor de un radio button con jQuery change()

Os pongo un ejemplo que puse en un post anterior (obtener el valor de un radio button con jQuery). Aquí tenéis el ejemplo:

Os explico el ejemplo:

  • Cuando el input con name ‘edad’ cambia de valor sacamos por pantalla un alert con el valor seleccionado obtenido con jQuery val().

Integración de jQuery change() con jQuery on()

Os pongo un código de ejemplo para ver la integración con la función on():

Tal y como os he puesto, detectamos el cambio del elemento con id = ‘ejemplo1’ y realizamos lo que creamos oportuno.

Selectores de jQuery

Para la detección, control o selección de elementos con jQuery os recomiendo leer este post:

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies