Event.observe 'change' events not being triggered in IE

Question

The Prototype event listener I use for changes in select menus is not being triggered in IE.

Event.observe('use_billing', 'change', Checkout.getBillingData);

This works fine in Firefox (of course), but nothing happens in IE (of course) - I've been Googling this for some time, but I have not found a suitable solution to this problem. I read there are problems, but I found nothing useful to circumvent the issue and get this to work.

I am really trying to avoid using inline event triggers, because they are obtrusive and make for a messy document prone to errors:

<select id='use_billing' onchange="Checkout.getBillingData();">....</select>

Any ideas would be great - this is the only thing stopping this project from going from beta to production.

Answer 1

I found the reason - it wasn't the focus issue, it turns out that I had the form element's name and id values the same - I changed the id value and everything worked fine.

Answer 2

This is a common issue with IE. It does not fire change events until the element loses focus.

To verify that this is indeed the cause of your issue, try changing the menu and then pressing tab to move your focus to another element. If your callback fires properly, you'll know there isn't some other problem.

I have worked around this problem before by also listening for other events like click or keydown. You can add a check to your callback to ensure that the value is actually different from before to ensure that you aren't processing the event more times than necessary (since other browsers will fire both click and change at the same time if they click on a new value).

Answer 3

I know this is an old topic but I wanted to share an alternative answer to the one above. In my code the name and id of the element were the same but that didn't matter.

In the function that gets fired the event argument was getting passed in from prototype. To get the value of the text box (that raised the event) in Firefox you use eventArg.currentTarget.value

but in IE you must use eventArg.srcElement.value

So in order for it to work in both browsers you must use...

var value = "";
var id = "";
if(eventArg.currentTarget){//FireFox
value = eventArg.currentTarget.value;
id = eventArg.currentTarget.id;
}
else{//IE
value = eventArg.srcElement.value;
id = eventArg.srcElement.id;
}