jQuery: llamar a una función al cambiar el valor de cualquier input en un formulario

Posted on by

Si tenemos un formulario como éste:

<form action="hazalgo.php" method="POST">
<input type="text" id="cantidad_modelo_1"/>
<input type="text" id="cantidad_modelo_1"/>
<input type="text" id="cantidad_modelo_1"/>
</form>

Podemos hacer que cuando cambie el valor de cualquiera de los campos automáticamente se ejecute una determinada función. Bastaría con añadir el siguiente código en la cabecera de la página (preferentemente dentro de las etiquetas <head></head>):

$(document).ready(function() {
	$("[id*=cantidad_modelo_]").each(
		function(index, value) {
			$(this).change(cantidad_cambiada)
		}
	);
});
 
function cantidad_cambiada(){
	alert("Me han llamado desde el campo: " + this.id);
}

Esto se consigue gracias a change(), que nos permite asociar el evento que se produce al cambiar el valor del campo con la función cantidad_cambiada().

También podríamos haber usado una clase, por ejemplo dato_cambiable:

<form action="hazalgo.php" method="POST">
<input type="text" class="dato_cambiable" id="cantidad_modelo_1"/>
<input type="text" class="dato_cambiable" id="cantidad_modelo_1"/>
<input type="text" class="dato_cambiable" id="cantidad_modelo_1"/>
</form>

Y usar el código:

$(".dato_cambiable").each(

Existe otra función, bind(), que nos permite asociar otros eventos con funciones. Ya la veremos en algún otro post.



Entradas relacionadas

  1. jQuery: recoger valores de un formulario
  2. jQuery: añadir una línea a una tabla html
  3. jQuery: sumar los input de un formulario dinámico
  4. jQuery: desactivar un elmento (disable)
  5. jQuery: seleccionar todos los elementos cuya ID contenga una palabra

2 thoughts on “jQuery: llamar a una función al cambiar el valor de cualquier input en un formulario”

  1. Saludos tengo una duda tengo algo parecido a esto

    Codigo:
    Codigo:
    Codigo:
    Codigo:

    Logro mediante jquery que al momento de escribir el codigo este busque en la BD la descripción y la devuelva en el texto con id descripcion, la cosa es que no he logrado que se replique esta función en los otros inputs solo busca la descripción en el primer input descripcion, podrias orientarme

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.