Displaying/hiding form elements, works in FireFox but not explorer

In the attached code I am attempting to change which fields appear depending on what is selected from the "registered" pop-up menu.  It works great in FireFox, but is completely ignored in Explorer.  Any ideas?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #FFFFFF;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
.oneColElsCtr #container {
	width: 46em;
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColElsCtr #mainContent {
	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
-->
</style>
 
 
<script language="javascript" type="text/javascript">
<!--
isNS4 = (document.layers) ? true : false;
isIE4 = (document.all && !document.getElementById) ? true : false;
isIE5 = (document.all && document.getElementById) ? true : false;
isNS6 = (!document.all && document.getElementById) ? true : false;
 
function switchDiv(strDivName1,strDivName2){
 
 //identify the element based on browser type
 if (isNS4) {
   objElement1 = document.layers[strDivName1];
   objElement2 = document.layers[strDivName2];
   objElement3 = document.layers['eventinfo'];
 } else if (isIE4) {
   objElement1 = document.all[strDivName1];
   objElement2 = document.all[strDivName2];
   objElement3 = document.all['eventinfo'];
 } else if (isIE5 || isNS6) {
   objElement1 = document.getElementById(strDivName1);
   objElement2 = document.getElementById(strDivName2);
   objElement3 = document.getElementById('eventinfo');
 }
 
 if(isNS4){
	 if(objElement1=="hideall") {
		objElement3.display="none";
		objElement2.display="none";
		objElement1.display="none";
	 }else{
       objElement2.display ="none";
       objElement1.display ="inherit";
	   objElement3.display ="inherit";
	 }
 }else{
	  if(objElement1=="hideall") {
		objElement3.display="none";
		objElement2.display="none";
		objElement1.display="none";
	 }else{
 
       objElement2.style.display = "none";
       objElement1.style.display = "inherit";
	   objElement3.style.display = "inherit";
 }
}
}
//-->
</script>
 
</head>
 
<body class="oneColElsCtr">
 
<div id="container">
  <div id="mainContent">
<p>Do you have an account registered with us? <select name="registered"><option value="hide" selected="selected" onClick="switchDiv('hideall','hideall')"></option><option value="yes" onClick="switchDiv('haveacct','needacct')">Yes</option><option value="no" onClick="switchDiv('needacct','haveacct')">No</option></select>
 
<div id="haveacct" style="display:none; position:relative">
<p>Thank you for returning.  Please enter your user name and password, and then click the Continue button to enter payment information.</p>
<table>
	<tr>
    	<td align="right">Email Address:</td>
        <td align="left"><input type="text" name="username"></td>
    </tr>    
	<tr>
    	<td align="right">Password:</td>
        <td align="left"><input type="password" name="Password"></td>
    </tr>
</table>        
</div>
 
<div id="needacct" style="display:none; position:relative;float=left">
<p>Welcome to Our Lady of Bethesda Retreat Center.  Please fill out the following information to help us serve you better.  Once the form is complete, click the Continue button to enter payment information.</p>
<table>
	<tr>
    	<td valign="top" align="right">Name:</td>
        <td valign="top" align="left"><input name="FirstName" value="first" size="25" ><input name="LastName" value="last" size="25"></td>
    </tr>    
	<tr>
    	<td valign="top" align="right">Street:</td>
        <td valign="top" align="left"><input name="Address1" size="50"><br /><input name="Address2" size="50"></td>
    </tr>    
	<tr>
    	<td valign="top" align="right">City, State  Zip:</td>
        <td valign="top" align="left"><input name="City" size="25"><input name="State" size="3"><input name="ZipCode" size="12"></td>
    </tr>    
	<tr>
    	<td valign="top" align="right">Home Phone:</td>
        <td valign="top" align="left"><input type="text" name="PhoneHome" size="15"></td>
    </tr>    
	<tr>
    	<td valign="top" align="right">Work Phone:</td>
        <td valign="top" align="left"><input type="text" name="PhoneWork" size="15"></td>
    </tr>    
	<tr>
    	<td valign="top" align="right">Cell Phone:</td>
        <td valign="top" align="left"><input type="text" name="PhoneCell" size="15"></td>
    </tr>    
	<tr>
    	<td valign="top" align="right">E-Mail Address:</td>
        <td valign="top" align="left"><input type="text" name="EmailAddress" size="40"></td>
    </tr>    
	<tr>
    	<td valign="top" align="right">Password:</td>
        <td valign="top" align="left"><input type="password" name="NewPassword" size="40"></td>
    </tr>    
	<tr>
    	<td valign="top" align="right">Parish:</td>
        <td valign="top" align="left"><input type="text" name="Parish" size="40"></td>
    </tr>    
	<tr>
    	<td valign="top" align="left">How did you hear about us:</td>
        <td valign="top" align="right"><textarea name="comments" rows="5" cols="50"></textarea></td>
    </tr>
</table>
</div>
<br />
<div id="eventinfo" style="display:none; position:relative; float=left">
<table>
	<tr>
    	<td valign="top" align="left">Dietary or Facility Needs:</td>
        <td valign="top" align="right"><textarea name="notes" rows="5" cols="50"></textarea></td>
    </tr>
	<tr>
    	<td valign="top" align="right">I will bring my nursing infant:</td>
        <td valign="top" align="left"><input type="checkbox" name="infant" value="Yes"></td>
    </tr>    
    <tr>
    	<td valign="top" align="left"></td>
        <td valign="top" align="right"><input type="submit" value="continue"  /></td>
    </tr>
</table>
</div>
</form></body>
</html>

Open in new window

mstoolmiAsked:
Who is Participating?
 
quincydudeConnect With a Mentor Commented:
The main problem is you cannot apply onclick event on option elements, but onchange on select element. And I also fixed some other errors in this code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #FFFFFF;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
.oneColElsCtr #container {
	width: 46em;
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColElsCtr #mainContent {
	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
-->
</style>
 
 
<script language="javascript" type="text/javascript">
<!--
isNS4 = (document.layers) ? true : false;
isIE4 = (document.all && !document.getElementById) ? true : false;
isIE5 = (document.all && document.getElementById) ? true : false;
isNS6 = (!document.all && document.getElementById) ? true : false;
 
function switchDiv(strDivName1){
 
 var checker = strDivName1;
 if(checker == "hideall")
 {
	strDivName1 = "haveacct";
	strDivName2 = "needacct"
 }
 else if(checker == "haveacct")
	strDivName2 = "needacct"
 else if(checker == "needacct")
	strDivName2 = "haveacct"
 
 //identify the element based on browser type
 if (isNS4) {
   objElement1 = document.layers[strDivName1];
   objElement2 = document.layers[strDivName2];
   objElement3 = document.layers['eventinfo'];
 } else if (isIE4) {
   objElement1 = document.all[strDivName1];
   objElement2 = document.all[strDivName2];
   objElement3 = document.all['eventinfo'];
 } else if (isIE5 || isNS6) {
   objElement1 = document.getElementById(strDivName1);
   objElement2 = document.getElementById(strDivName2);
   objElement3 = document.getElementById('eventinfo');
 }
 
 if(isNS4){
	 if(checker=="hideall") {
		objElement3.display="none";
		objElement2.display="none";
		objElement1.display="none";
	 }else{
       objElement2.display ="none";
       objElement1.display ="block";
	   objElement3.display ="block";
	 }
 }else{
	  if(checker=="hideall") {
		objElement3.style.display="none";
		objElement2.style.display="none";
		objElement1.style.display="none";
	 }else{ 
       objElement2.style.display = "none";
       objElement1.style.display = "block";
	   objElement3.style.display = "block";
	 }
 }
}
//-->
</script>
 
</head>
 
<body class="oneColElsCtr">
 
<div id="container">
  <div id="mainContent">
<p>Do you have an account registered with us? <select onchange="switchDiv(this.options[this.selectedIndex].value)" name="registered"><option value="hideall" selected="selected" ></option><option value="haveacct" >Yes</option><option value="needacct" >No</option></select>
 
 
<div id="haveacct" style="display:none; position:relative">
<p>Thank you for returning.  Please enter your user name and password, and then click the Continue button to enter payment information.</p>
<table>
	<tr>
    	<td align="right">Email Address:</td>
        <td align="left"><input type="text" name="username"></td>
    </tr>    
	<tr>
    	<td align="right">Password:</td>
        <td align="left"><input type="password" name="Password"></td>
    </tr>
</table>        
</div>
 
<div id="needacct" style="display:none; position:relative;float=left">
<p>Welcome to Our Lady of Bethesda Retreat Center.  Please fill out the following information to help us serve you better.  Once the form is complete, click the Continue button to enter payment information.</p>
<table>
	<tr>
    	<td valign="top" align="right">Name:</td>
        <td valign="top" align="left"><input name="FirstName" value="first" size="25" ><input name="LastName" value="last" size="25"></td>
    </tr>    
	<tr>
    	<td valign="top" align="right">Street:</td>
        <td valign="top" align="left"><input name="Address1" size="50"><br /><input name="Address2" size="50"></td>
    </tr>    
	<tr>
    	<td valign="top" align="right">City, State  Zip:</td>
        <td valign="top" align="left"><input name="City" size="25"><input name="State" size="3"><input name="ZipCode" size="12"></td>
    </tr>    
	<tr>
    	<td valign="top" align="right">Home Phone:</td>
        <td valign="top" align="left"><input type="text" name="PhoneHome" size="15"></td>
    </tr>    
	<tr>
    	<td valign="top" align="right">Work Phone:</td>
        <td valign="top" align="left"><input type="text" name="PhoneWork" size="15"></td>
    </tr>    
	<tr>
    	<td valign="top" align="right">Cell Phone:</td>
        <td valign="top" align="left"><input type="text" name="PhoneCell" size="15"></td>
    </tr>    
	<tr>
    	<td valign="top" align="right">E-Mail Address:</td>
        <td valign="top" align="left"><input type="text" name="EmailAddress" size="40"></td>
    </tr>    
	<tr>
    	<td valign="top" align="right">Password:</td>
        <td valign="top" align="left"><input type="password" name="NewPassword" size="40"></td>
    </tr>    
	<tr>
    	<td valign="top" align="right">Parish:</td>
        <td valign="top" align="left"><input type="text" name="Parish" size="40"></td>
    </tr>    
	<tr>
    	<td valign="top" align="left">How did you hear about us:</td>
        <td valign="top" align="right"><textarea name="comments" rows="5" cols="50"></textarea></td>
    </tr>
</table>
</div>
<br />
<div id="eventinfo" style="display:none; position:relative; float=left">
<table>
	<tr>
    	<td valign="top" align="left">Dietary or Facility Needs:</td>
        <td valign="top" align="right"><textarea name="notes" rows="5" cols="50"></textarea></td>
    </tr>
	<tr>
    	<td valign="top" align="right">I will bring my nursing infant:</td>
        <td valign="top" align="left"><input type="checkbox" name="infant" value="Yes"></td>
    </tr>    
    <tr>
    	<td valign="top" align="left"></td>
        <td valign="top" align="right"><input type="submit" value="continue"  /></td>
    </tr>
</table>
</div>
</form></body>
</html>

Open in new window

0
 
quincydudeCommented:
try changing those all
style.display = "inherit";

to

style.display = "block";
0
 
erikTsomikSystem Architect, CF programmer Commented:
the problem is here you can not apply event to options. SO the JS has to be rewritten so it would work strictly of selected Indexes
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
sunithnairCommented:
Try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
        background: #FFFFFF;
        margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
        padding: 0;
        text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
        color: #000000;
}
.oneColElsCtr #container {
        width: 46em;
        background: #FFFFFF;
        margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
        border: 1px solid #000000;
        text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColElsCtr #mainContent {
        padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
-->
</style>
 
 
<script language="javascript" type="text/javascript">
<!--
isNS4 = (document.layers) ? true : false;
isIE4 = (document.all && !document.getElementById) ? true : false;
isIE5 = (document.all && document.getElementById) ? true : false;
isNS6 = (!document.all && document.getElementById) ? true : false;
 
function switchDiv(strDivName1,strDivName2){
 
 //identify the element based on browser type
 if (isNS4) {
   objElement1 = document.layers[strDivName1];
   objElement2 = document.layers[strDivName2];
   objElement3 = document.layers['eventinfo'];
 } else if (isIE4) {
   objElement1 = document.all[strDivName1];
   objElement2 = document.all[strDivName2];
   objElement3 = document.all['eventinfo'];
 } else if (isIE5 || isNS6) {
   objElement1 = document.getElementById(strDivName1);
   objElement2 = document.getElementById(strDivName2);
   objElement3 = document.getElementById('eventinfo');
 }
 
 if(isNS4){
         if(objElement1=="hideall") {
                objElement3.display="none";
                objElement2.display="none";
                objElement1.display="none";
         }else{
       objElement2.display ="none";
       objElement1.display ="inherit";
           objElement3.display ="inherit";
         }
 }else{
          if(objElement1=="hideall") {
                objElement3.style.display="none";
                objElement2.style.display="none";
                objElement1.style.display="none";
         }else{
 
       objElement2.style.display = "none";
       objElement1.style.display = "inherit";
           objElement3.style.display = "inherit";
 }
}
}
//-->
</script>
 
</head>
 
<body class="oneColElsCtr">
 
<div id="container">
  <div id="mainContent">
<p>Do you have an account registered with us? <select name="registered"><option value="hide" selected="selected" onClick="switchDiv('hideall','hideall')"></option><option value="yes" onClick="switchDiv('haveacct','needacct')">Yes</option><option value="no" onClick="switchDiv('needacct','haveacct')">No</option></select>
 
<div id="haveacct" style="display:none; position:relative">
<p>Thank you for returning.  Please enter your user name and password, and then click the Continue button to enter payment information.</p>
<table>
        <tr>
        <td align="right">Email Address:</td>
        <td align="left"><input type="text" name="username"></td>
    </tr>    
        <tr>
        <td align="right">Password:</td>
        <td align="left"><input type="password" name="Password"></td>
    </tr>
</table>        
</div>
 
<div id="needacct" style="display:none; position:relative;float=left">
<p>Welcome to Our Lady of Bethesda Retreat Center.  Please fill out the following information to help us serve you better.  Once the form is complete, click the Continue button to enter payment information.</p>
<table>
        <tr>
        <td valign="top" align="right">Name:</td>
        <td valign="top" align="left"><input name="FirstName" value="first" size="25" ><input name="LastName" value="last" size="25"></td>
    </tr>    
        <tr>
        <td valign="top" align="right">Street:</td>
        <td valign="top" align="left"><input name="Address1" size="50"><br /><input name="Address2" size="50"></td>
    </tr>    
        <tr>
        <td valign="top" align="right">City, State  Zip:</td>
        <td valign="top" align="left"><input name="City" size="25"><input name="State" size="3"><input name="ZipCode" size="12"></td>
    </tr>    
        <tr>
        <td valign="top" align="right">Home Phone:</td>
        <td valign="top" align="left"><input type="text" name="PhoneHome" size="15"></td>
    </tr>    
        <tr>
        <td valign="top" align="right">Work Phone:</td>
        <td valign="top" align="left"><input type="text" name="PhoneWork" size="15"></td>
    </tr>    
        <tr>
        <td valign="top" align="right">Cell Phone:</td>
        <td valign="top" align="left"><input type="text" name="PhoneCell" size="15"></td>
    </tr>    
        <tr>
        <td valign="top" align="right">E-Mail Address:</td>
        <td valign="top" align="left"><input type="text" name="EmailAddress" size="40"></td>
    </tr>    
        <tr>
        <td valign="top" align="right">Password:</td>
        <td valign="top" align="left"><input type="password" name="NewPassword" size="40"></td>
    </tr>    
        <tr>
        <td valign="top" align="right">Parish:</td>
        <td valign="top" align="left"><input type="text" name="Parish" size="40"></td>
    </tr>    
        <tr>
        <td valign="top" align="left">How did you hear about us:</td>
        <td valign="top" align="right"><textarea name="comments" rows="5" cols="50"></textarea></td>
    </tr>
</table>
</div>
<br />
<div id="eventinfo" style="display:none; position:relative; float=left">
<table>
        <tr>
        <td valign="top" align="left">Dietary or Facility Needs:</td>
        <td valign="top" align="right"><textarea name="notes" rows="5" cols="50"></textarea></td>
    </tr>
        <tr>
        <td valign="top" align="right">I will bring my nursing infant:</td>
        <td valign="top" align="left"><input type="checkbox" name="infant" value="Yes"></td>
    </tr>    
    <tr>
        <td valign="top" align="left"></td>
        <td valign="top" align="right"><input type="submit" value="continue"  /></td>
    </tr>
</table>
</div>
</form></body>
</html>

Open in new window

0
 
mstoolmiAuthor Commented:
Tried both suggestions, both worked in FIreFox, neither worked in Explorer 7.  Not quite sure what erikTsomik was referring too, so I could not work with that.

Any other ideas?
0
 
mstoolmiAuthor Commented:
OK, erikTsomik, I think I understand what you were getting at.  When I switched from the yes/no drop down to yes/no buttons it works great once inherit is changed to block.
0
 
mstoolmiAuthor Commented:
While the buttons work, I would still prefer the drop down - any ideas?
0
 
mstoolmiAuthor Commented:
Thank You!!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.