onChange on IE vs Firefox (the importance of cross browser test)

I have wasted a couple of my previous hours in my life due to this little known fact: onChange event on IE and Firefox is triggered differently.

TL;DR version: use onClick instead of onChange to ensure cross browser compatibility.

What happened to me before was a created a checkbox and attach onChange event on it. On Firefox it worked fine - whenever I click the checkbox, the onChange event is triggered, but that’s not the case with IE - nothing seems to happen when I click the checkbox.

After a couple hours of debugging and googling - I finally found out that IE and Firefox treat onChange event differently.

If you want to know more about it, Scott’s blog post explains it rather well.

Safest bet is to use onClick instead of onChange, it should work on IE and Firefox.

With this post, I am also want to re-iterate the importance of testing on different browsers early. This is something that I often forgot and bites me hard usually near the project deadline.

I’ve fallen into the trap of assuming if my Javascript works on Firefox it will work on IE - not true. Using a Javascript framework doesn’t eliminate the necessity of cross browsers testing (unfortunately).