Why does IE hate Javascript?

[LeChatNoir13]

I'm jumping into teaching myself Javascript, PHP, mySQL, and AJAX all at once in order to make a customer database to be used at work. Having said that, it's no surprise I'm getting stumped on a few things. The frustrating part is that pretty much every problem I've been having pertains to IE. As of right now, all my code works fine on Firefox and Chrome, but IE refuses to play nice. I've spent several hours reading forum posts dating back half a decade about people having similar issues but, so far, none of them have led me to any solutions. At this point I'm hoping it's all just simple, stupid, and easily correctable mistakes on my part. Here's one of them...HTML Code:

<input name="servicePlan" type="hidden" value="0" /><input id="servicePlan" name="servicePlan" type="checkbox" value="1" /> Service Plan <br /><input name="DNS" type="hidden" value="0" /><input id="dns" name="DNS" type="checkbox" value="1" onclick="dnsToggle(this.checked)" /> Do Not Service

Javascript Code:

		 function dnsToggle(checked)		 {  			// Discontinues and disables servicePlan for customers marked "Do not service".			// Sets form background to indicate DNS setting.			// Resets servicePlan and form background when DNS is unchecked.			var x = 1;			if(checked == true)			{			   document.getElementById("servicePlan").setAttribute("checked", false);			   document.getElementById("servicePlan").checked = false;			   document.getElementById("servicePlan").setAttribute("disabled", "disabled");			   document.getElementById("servicePlan").disabled = true;			   document.getElementById("div1").style.backgroundImage = "url(dns.png)";			}			else			{			   document.getElementById("div1").style.backgroundImage = "none";			   document.getElementById("servicePlan").disabled = false;			}		 }

This works fine in Firefox and Chrome, but IE seems to ignore any changes made to servicePlan. It changes the background fine, but the checkbox stays the same. As you can see, I've tried both attribute-setting methods, but it still does nothing. Any ideas?

[thescientist]

are you checking for errors?

[LeChatNoir13]

are you checking for errors?

I checked and it didn't report any.

[thescientist]

do you have a live link to this page/script?

[LeChatNoir13]

http://173.79.14.30/customerenter.php

[skaterdav85]

IE doesnt hate JS. Microsoft just chose to implement the DOM API a bit differently. I think IEs implementation of ECMAScript is consistent with other browsers though. Someone please chime in if I am incorrect.

[thescientist]

what version of IE? It might help if you add a DTD to your page. Playing around with the different versions of IE and view modes available in IE8, it seems that quirks mode will definitely not work, but running as IE8 in standards compatibility mode seemed to do OK. I would add a strict DTD, and try one version of disabling the checkbox (as opposed to all at once), probably by just setting the disabled property to true.

[dsonesuk]

you are probably getting a conflict caused by using the same name for two form elements.<input name="servicePlan" type="hidden" value="0" /><input id="servicePlan" name="servicePlan" type="checkbox" value="1" /> Service Plan <br />try changing the hidden form element name and see what happens

[LeChatNoir13]

I added the DTD and now it's working fine. I was actually thinking I should go back and add them to all my pages, but then I noticed this wasn't working and figuring that out became the priority. I probably would have ended up getting really frustrated and giving up on IE completely before finally getting around to adding the DTDs. In any case, it would have eventually worked... but I probably wouldn't have even known it after I dropped IE support. Thanks for saving me the frustration. :)The duplicate name is there because I set up the database to require that value. Then I wrote the data entry code to find that, if you don't check the box, it sends nothing instead of sending false. I could have changed the database to allow a null value... but I was feeling a bit lazy at the time. So the hidden element sets it to 0, which gets overridden if the box gets checked. I'm sure I'll clean it up at some point. But it hasn't caused any problems, so it's pretty low on the priority list.

[dsonesuk]

Without the !DOCTYPE declaration it will target the first form element with name "servicePlan" in all IE versions. Adding the !DOCTYPE will fix the problem for IE8 and above, but not IE8s IE7 compatibility feature, or IE7 and below versions, they will still target the first "servicePlan" named form element.

[jeffman]

It's a fairly simple server-side task to see if a form value has been set and write appropriate data to your database.Alternatively, you might use 2 radio buttons instead of a checkbox.

[ShadowMage]

The duplicate name is there because I set up the database to require that value. Then I wrote the data entry code to find that, if you don't check the box, it sends nothing instead of sending false. I could have changed the database to allow a null value... but I was feeling a bit lazy at the time. So the hidden element sets it to 0, which gets overridden if the box gets checked. I'm sure I'll clean it up at some point. But it hasn't caused any problems, so it's pretty low on the priority list.

As DD stated, this is pretty simple. You just use the isset or empty function to check if the variable exists. If it doesn't, you can set it to a default value. Something like:

$servicePlan = 0;if (isset($_POST['servicePlan'])) {   $servicePlan = $_POST['servicePlan'];}

That way, if the box isn't checked, it will default to 0, but if it is checked it will set the value to whatever the checkbox's value is.

[justsomeguy]

Microsoft just chose to implement the DOM API a bit differently.

That's very diplomatic of you. It's true that IE has a different model than other browsers, but it's also true that there are a ton of bugs in IE's implementation. So they designed an implementation that is fundamentally different from others, and then they screwed it up. I've seen several bugs in IE, with Javascript and otherwise, that really make me question the design decision that would even lead up to problems like that.Here's an example, this is a bug I recently ran into. I know that IE8 is affected by this, that IE9 is not affected, and I'm not sure about previous versions. Here's a test case:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>  <head>	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">	<meta http-equiv="Pragma" content="no-cache">	<meta http-equiv="Expires" content="-1">	<meta http-equiv="Cache-Control" content="no-cache">	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >	<title>Mixed Content Warning Test</title>	<style type="text/css">	#test_el	{	  width: 110px;	}	</style>  </head>  <body>	<div id="test_el" style="background-image:url(bg.png);">	  <a href="#" onclick="el=document.getElementById('test_el');el.parentNode.removeChild(el);" style="color: white;">Click To Remove</a>	</div>  </body></html>

The only things that are relevant there with regard to the bug are that the div element has a background image specified in an inline style, and that there is a piece of Javascript code which removes that element from the DOM. If you load that page over HTTPS, and click the link to remove the element, when it gets removed IE will pop up the "mixed content" dialog which normally shows when you have a page secured with SSL that uses images or other resources that are not secured. So, removing the element with a background image causes the mixed content dialog to appear. The main thing that confuses me is how it is even possible that DOM element removal is related in any way to the mixed content checking. Things like this just illustrate that there are fundamental problems with how IE works. Removing an element from the DOM should not cause any mixed content checking to happen, but it does. The bug also goes away if the background image style is moved to the <style> element or placed in an external style sheet, it only gets triggered when the background image is specified inline in the style attribute of the element.

[skaterdav85]

That is true that IE does have a lot of bugs. John Resig mentioned a few of them in his YUI Theatre video called The DOM is a Mess. I think at one point, the getElementById method had problems when elements had the same name as an ID on the page.That bug you mentioned above must have been a tough one to figure out!