We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

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

mstoolmi
mstoolmi asked
on
Medium Priority
326 Views
Last Modified: 2013-12-08
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

Comment
Watch Question

try changing those all
style.display = "inherit";

to

style.display = "block";
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
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

Author

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?

Author

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.

Author

Commented:
While the buttons work, I would still prefer the drop down - any ideas?
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

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
Thank You!!!
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.