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.
Vamos a ver la sintaxis extraída de su web oficial:
$(selector).change(function)
Os explico:
Vamos a ver mediante unos sencillos ejemplos prácticos su funcionamiento.
Vamos a ver en este primer ejemplo cómo obtener el valor de un select:
$(document).ready(function(){ $("select[name=color1]").change(function(){ alert($('select[name=color1]').val()); $('input[name=valor1]').val($(this).val()); }); $("#ejemplo2").change(function(){ alert($('select[id=ejemplo2]').val()); $('#valor2').val($(this).val()); }); $(".ejemplo3").change(function(){ alert($('select[class=ejemplo3]').val()); $('.valor3').val($(this).val()); }); });
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:
Como habéis podido ver los 3 formularios son bien sencillos, os pongo su código HTML:
Formulario 1 <form name="ejemplo1" action="17-jquery-change-demo1.php" method="POST"> <select name="color1"> <option value="0">Selecciona una opción</option> <option value="azul">Azul</option> <option value="rojo">Rojo</option> </select> <input type="text" name="valor1" size="40" value="Aquí saldrá el valor del select cuando cambie"> </form> Formulario 2 <form name="ejemplo2" action="17-jquery-change-demo1.php" method="POST"> <select name="color2" id="ejemplo2"> <option value="0">Selecciona una opción</option> <option value="azul">Azul</option> <option value="rojo">Rojo</option> </select> <input type="text" name="valor2" size="40" id="valor2" value="Aquí saldrá el valor del select cuando cambie"> </form> Formulario 3 <form name="ejemplo3" action="17-jquery-change-demo1.php" method="POST"> <select name="color3" class="ejemplo3"> <option value="0">Selecciona una opción</option> <option value="azul">Azul</option> <option value="rojo">Rojo</option> </select> <input type="text" name="valor3" size="40" class="valor3" value="Aquí saldrá el valor del select cuando cambie"> </form>
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:
$(document).ready(function(){ $("input[name=nombre1]").change(function(){ alert($('input[name=nombre1]').val()); }); $("#nombre2").change(function(){ alert($('input[id=nombre2]').val()); }); $(".nombre3").change(function(){ alert($('input[class=nombre3]').val()); }); });
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:
Solo me queda poneros el código HTML de los 3 formularios:
Formulario 1 <form name="ejemplo1" action="17-jquery-change-demo2.php" method="POST"> Introduce tu nombre: <input type="text" name="nombre1" size="40" value=""> </form> Formulario 2 <form name="ejemplo2" action="17-jquery-change-demo2.php" method="POST"> Introduce tu nombre: <input type="text" name="nombre2" id="nombre2" size="40" value=""> </form> Formulario 3 <form name="ejemplo3" action="17-jquery-change-demo2.php" method="POST"> Introduce tu nombre: <input type="text" name="nombre3" class="nombre3" size="40" value=""> </form>
Os pongo un ejemplo que puse en un post anterior (obtener el valor de un radio button con jQuery). Aquí tenéis el ejemplo:
<script type="text/javascript"> $(document).ready(function() { $("input[name=edad]").change(function () { alert($(this).val()); }); }); </script>
Os explico el ejemplo:
Os pongo un código de ejemplo para ver la integración con la función on():
$('#ejemplo1').on('change', function() { // lo que queramos hacer });
Tal y como os he puesto, detectamos el cambio del elemento con id = ‘ejemplo1’ y realizamos lo que creamos oportuno.
Para la detección, control o selección de elementos con jQuery os recomiendo leer este post: