[SOLUCIONADO] Detectar evento "onchange" en lista desplegable

[majete]

Hola a todos,
Entiendo que esto que necesito hacer es posible, pero me estoy volviendo loco para encontrar la forma de conseguirlo.

Estoy utilizando el plugin "formeter" (http://www.formeter.techlabs.ro/advanced.html) para tener una barra de progreso para un formulario. Cuando detecta un cambio en las listas desplegables o radiobuttons con el evento "ON CHANGE" hace su función y marca el avance en la barra. También si detecta el evento "ON KEYDOWN" para los campos de texto inputs.

El problema es que yo estoy sacando el valor de otra forma, no actuando directamente sobre ese elemento y lo que me pasa es que no funciona de esta manera.

Tengo este jquery

Código Javascript:

$(mainForm).find(sel + ':checkbox, ' + sel + ':radio, select' + sel).on('change', function () {
                animateBar.call(_this);
            });
$(mainForm).find('input[type=text]' + sel + ', input[type=password]' + sel + ', textarea' + sel + ', input[type=hidden]' + sel + ',  input[type=email]' + sel + ', input[type=tel]' + sel).on('keydown', function () {
                timer && clearTimeout(timer);
                timer = setTimeout(function () {
                    animateBar.call(_this);
                }, 300);
            });
 

Si yo en un campo del formulario escribo algo sobre el input todo funciona (coge el "KEY DOWN" pero si yo le asigno el valor de ese input de otra forma (se lo paso por jquery) al no detectar el evento el KEY DOWN no actúa.

¿Se os ocurre cómo puedo solucionarlo?

He probado cambiando el evento de "keydown" a "change" pero nada, no lo detecta, a pesar de que cambio el valor del input o de la lista desplegable. Me vale cualquiera de las dos porque puedo asignar un valor tanto a un campo INPUT como a un campo SELECT.

Mil gracias!!

[Alexis88]

Iniciado por majete

[...] pero si yo le asigno el valor de ese input de otra forma (se lo paso por jquery) [...]

¿Y si en ese bloque de código ejecutas las acciones que deben ocurrir cuando ocurra un cambio?

[majete]

Iniciado por Alexis88

¿Y si en ese bloque de código ejecutas las acciones que deben ocurrir cuando ocurra un cambio?

Sí, eso había pensado... pero el tema es que no llega a ejecutarse el evento... me explico:

1. Utilizo un rangeslider de bootstrap para asignar el valor al campo input correspondiente (o select, porque he probado varios tipos)
2. El campo input (o select) muestra el valor que yo le he asignado pero no se activa el evento "onchange" en el caso del select, y comprensiblemente, no se activa el evento "onkeydown" porque no se ha tecleado nada, sino que sólo se ha cambiado el valor.

El tema es que si yo directamente en el campo input introduzco el dato se activa el "keydown", o si cambio el valor del SELECT también se activa el "onchange", pero no consigo activar ningún evento sin tocar directamente en los campos, y sólo cambiando el valor del dato que contienen.

Si os fijáis en el código que he puesto, los campos input funcionan con la acción "onkeydown"y los radiobutton, cheklist, etc. funcionan con la acción "onchange".

Claro, yo necesito de alguna forma forzar ese evento con alguna acción, pero no lo consigo.

¿Alguna idea?
Mil gracias!!

[Alexis88]

El punto es que, si realizas el cambio desde el código, se omite la interacción con el DOM, por lo que evidentemente esos eventos no se ejecutarán. Por eso es que te sugiero que, en el bloque de código en el que realizas la asignación de del dato, ejecutes las acciones que deseas. Si no quieres repetir líneas de código, puedes tener todo en una función a la cual solo tendrías que llamar.

Un ejemplo:

Código HTML:

<select id="foo">...</select>
<input type="text" id="bar" />
 

Código Javascript:

//La función a ejecutarse
function ejemplo(){
    alert("Ocurrió un cambio");
}
 
//Si se producen estos eventos en los elementos del DOM, se ejecutará la función "ejemplo"
$("#foo").on("change", ejemplo);
$("#bar").on("keydown change", ejemplo);
 
//Si hago el cambio de valor desde el código, también se ejecutará la función "ejemplo"
$("#foo").val("abc");
ejemplo();
 
$("#bar").val("def");
ejemplo();
 

[maligix]

Hola,

Creo entender que pretendes lo siguiente:

Cuando tenemos una lista desplegable select con diferentes option, en general nos interesará saber cuál de los elementos option es el que se encuentra seleccionado y el contenido de su atributo value. Para ello hemos de tener en cuenta que:

a) Cada elemento HTML de tipo select tiene una propiedad denominada options, de tipo array, que contiene los elementos options con índice 0, 1, 2, … n. Por ejemplo aquí vemos cómo extraer los elementos select, sus atributos value y el texto que contienen (mediante la propiedad text).

var elementosSelect = document.getElementsByTagName('select');
alert('Contenido de value es: '+ elementosSelect[0].value;
alert('Contenido texto es: '+ elementosSelect[0].text;




La propiedad selectedIndex del elemento select nos devuelve el índice numérico de la opción seleccionada (la primera opción tiene índice 0, la segunda 1, y así sucesivamente).

Aquí vemos un ejemplo de cómo se puede utilizar selectedIndex:

var elementoCiudad = document.getElementById('ciudad');
var indiceSeleccionado = elementoCiudad.selectedIndex;
alert (elementoCiudad.options[indiceSeleccionado].text);




También podemos escribir elementoCiudad.options[elementoCiudad.selectedIndex].text prescindiendo del uso de la variable intermedia indiceSeleccionado.

El evento para detectar cambios en los select normalmente será “onchange”.

Yo lo tengo implementado en relación con la selección letra por letra del código de captcha en:
[URL="http://tecnicoinformaticobarcelona.com/"]tecnico informatico[/URL]

Saludos,

Manuel

[majete]

Iniciado por Alexis88

El punto es que, si realizas el cambio desde el código, se omite la interacción con el DOM, por lo que evidentemente esos eventos no se ejecutarán. Por eso es que te sugiero que, en el bloque de código en el que realizas la asignación de del dato, ejecutes las acciones que deseas. Si no quieres repetir líneas de código, puedes tener todo en una función a la cual solo tendrías que llamar.

Un ejemplo:

Código HTML:

<select id="foo">...</select>
<input type="text" id="bar" />
 

Código Javascript:

//La función a ejecutarse
function ejemplo(){
    alert("Ocurrió un cambio");
}
 
//Si se producen estos eventos en los elementos del DOM, se ejecutará la función "ejemplo"
$("#foo").on("change", ejemplo);
$("#bar").on("keydown change", ejemplo);
 
//Si hago el cambio de valor desde el código, también se ejecutará la función "ejemplo"
$("#foo").val("abc");
ejemplo();
 
$("#bar").val("def");
ejemplo();
 

Exactamente es lo que me comentas... al realizar el cambio desde código, no llega la interacción al DOM y el evento no se ejecuta. Me es imposible saber qué es lo que le tengo que meter a la función, porque el JS que hay ahora (formeter.js) me resulta muy complicado de entender. Empieza así:

Código Javascript:

(function ($) {
    $.fn.extend({
        formProgress: function (options) {
            var st = {
                speed: 300,
                style: 'green',
                bubble: false,
                selector: '.required',
                minPercent: 30,
                message: 'Please complete all required fields !'
            };
            if (options) {
                $.extend(st, options);
            }
            var _this = $(this),
                sel = st.selector,
                mainForm = $(sel).parents('form'),
                names = [],
                timer;
 
            $(sel + ":radio").each(function () {
                var n = $(this).attr('name');
                if ($.inArray(n, names) < 0) {
                    names.push(n);
                }
            });
 
            var totalInputs = $(sel).not(":radio").length + names.length;
 
            $(mainForm).find(sel + ':checkbox, ' + sel + ':radio, select' + sel).on('change', function () {
                animateBar.call(_this);
            });
            $(mainForm).find('input[type=text]' + sel + ', input[type=password]' + sel + ', textarea' + sel + ', input[type=hidden]' + sel + ',  input[type=email]' + sel + ', input[type=tel]' + sel).on('keydown', function () {
                timer && clearTimeout(timer);
                timer = setTimeout(function () {
                    animateBar.call(_this);
                }, 300);
            });
...
 

Los cambios en los campos de formulario se ejecutan en los "onchange" u "onkeydown"...

[majete]

Bueno, parece que ya solucioné todo!
Muchas gracias a todos y en especial a @maligix por la ayuda.

La función que tengo que ejecutar se llama "updateProgressBar()" y tal y como me dijo lo llamo una vez actualizo el valor del campo.

Mil gracias!!
JC