JavaScript

Jose Morales-Mendizabal
Jose Morales-Mendizabal
18,450 Points

IE9 Bug: JavaScript code works only when developer console has been opened.

I have a website I maintain, and in the website we have a registration form (http://www.publicpolicyseminars.com/register) for people to register to the seminars the company offers. The form is validated with JavaScript (and HTML5 for modern browsers).

I have the script set up so that the submit button is not enabled until all required fields have been filled out. Ive tested the form extensively in most browsers and it works, but now we're getting complaints that it's hard to register on IE9.

I used BrowserStack to see what's going wrong with the form in IE9, and the weirdest thing is happening. Indeed the submit button does NOT enable when I fill out all the fields, HOWEVER, once I opened up the console to see my debugging logs, the form enabled the button?!

I keep getting the same result. So basically the code that enables the button DOES NOT work unless the firebug console is showing.... so weird. Any idea why that could be?

Im scratching my head real hard at this...

thanks!

2 Answers

Jose Morales-Mendizabal
Jose Morales-Mendizabal
18,450 Points

Fixed the problem! Figured out what was wrong thanks to a thread in StackOverflow! Turns out it was because I had console.log() in my code (which is in itself a bad idea to ship code with debugging logs).

Apparently In IE9 (and perhaps even earlier versions of IE) "The console object is only activated when the Dev Toolbar is opened. Prior to that, calling the console object will result in it being reported as undefined. After the toolbar has been opened, the console will exist (even if the toolbar is subsequently closed), so your console calls will then work."

And so I just deleted all console method calls from my code, and it works!

here's the thread with more details http://stackoverflow.com/questions/7742781/why-javascript-only-works-after-opening-developer-tools-in-ie-once

Sean T. Unwin
MOD
Sean T. Unwin
Treehouse Moderator 28,323 Points

I don't know if this is helpful in your case, but if you're using jQuery use prop() to enable/disable the button.

$('.form-button').prop("disabled", false);

If using plain JS don't use setAttribute for IE users. Use:

document.querySelector('.form-button').disabled = false;