Forum Moderators: open
Here is my code:
function htmlFill(){
var idType = document.getElementById("idType").value;
if(idType == "1"){
document.getElementById("idContainer").innerHTML = "1 Selected!";
}
if(idType == "2"){
document.getElementById("idContainer").innerHTML = "2 Selected!";
}
if(idType == "3"){
document.getElementById("idContainer").innerHTML = "3 Selected!";
}
}
I made that code precisely to affect the idContainer <div> depending on the chosen value of a <select> field. I am using the onchange event handler for that to occur. Additionally I am calling the function after the form is rendered so I get a default form view. A user can change the selection and change the form requirements accordingly.
This works fine with firefox, but not in IE7 or 8, or in 8 with compatibility mode... (same difference as in IE7? not sure...).
This is the HTML side of it:
<select name="idType" id="idType" onchange="htmlFill();">
<option title="1">1</option>
<option>2</option>
<option>3</option>
</select>
So... just what is it that IE cannot understand from this javascript code!? I am really puzzled!
<select name="idType" id="idType" onchange="htmlFill();">
<option value="1" title="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype on one line, no need for XHTML on an HTML page -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript">
window.onload=function() {
if (document.getElementById) {
document.getElementById("idType").onchange=function() { htmlFill(this); }
document.getElementById('idContainer').style.display='none';
}
}
function htmlFill(selectObject){
var selected = selectObject.selectedIndex;
var container = document.getElementById('idContainer');
container.style.display = (selected==0)?'none':'block';
container.innerHTML = (selected==0)?'':selected+" Selected!";
}
</script>
</head>
<body>
<form action="" method="get" id="myform">
<select name="idType" id="idType">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
<p style="display:none; width: 400px;" id="idContainer"></p>
</body>
</html>
