Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Chrome form onChange not firing

How do I get Google Chrome (9.0.597.98 on Windows 7 64-bit) to fire a form's onchange? If you play around with the following example, nothing gets consoled out. It's working fine in Firefox 3.6.13.

<form onchange="console.info('form changed')">
 <select>
  <option>uno</option>
  <option>dos</option>
 </select>
 <input type="radio" name="videoDevice" value="tres" checked="checked" />
 <input type="radio" name="videoDevice" value="cuatro" checked="checked" />
</form>
like image 797
JoJo Avatar asked Feb 26 '11 02:02

JoJo


3 Answers

Binding the change event via JS seems to work ok:

HTML

<form id="test">
 <select>
  <option>uno</option>
  <option>dos</option>
 </select>
 <input type="radio" name="videoDevice" value="tres" checked="checked" />
 <input type="radio" name="videoDevice" value="cuatro" checked="checked" />
</form>

JS

document.getElementById('test').addEventListener('change', function() {
    alert('change fired');
}, false);
like image 89
ggutenberg Avatar answered Nov 15 '22 18:11

ggutenberg


Basically the form has only the following two events: onreset,onsubmit. You can do a workaround:

window.onload=(function ()
{
    var Form=
    {
        w3c: !!window.addEventListener,
        addEvent: function (form,type,listener)
        {
            var inputs=form.elements;
            for (var i=0,l=inputs.length; i<l; ++i)
            {
                var input=inputs[i];
                if (this.w3c)
                {
                    input.addEventListener(type,listener,false);
                }
                else
                {
                    input.attachEvent("on"+type,listener);
                }
            }
        },
        fixEvents: function (form)
        {
            var eventPattern=/^on(\w+)$/;
            var attribute;
            for (var i=0,l=form.attributes.length; i<l; ++i)
            {
                var attribute=form.attributes.item(i);
                var name=attribute.name;
                var value=attribute.value;
                if (eventPattern.test(name) && !form[name])
                {
                    var type=eventPattern.exec(name)[1];
                    var listener=new Function(value);
                    this.addEvent(form,type,listener);
                }
            }
        }
    };

    return function ()
    {
        var forms=document.getElementsByTagName("form");
        for (var i=0,l=forms.length; i<l; ++i)
        {
            Form.fixEvents(forms[i]);
        }
    };
})();
like image 1
inf3rno Avatar answered Nov 15 '22 20:11

inf3rno


     var button = document.form.adet;
        if (button.addEventListener) {  // all browsers except IE before version 9
            button.addEventListener ("change", function () { alert('1'); }, false);
        }
        else {
            if (button.attachEvent) {   // IE before version 9
                button.attachEvent ("onchange", function () { alert('2'); });
            }
        }
like image 1
Ogun Mericligil Avatar answered Nov 15 '22 19:11

Ogun Mericligil