[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2009-02-18
8
Medium Priority
?
317 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

0
Comment
Question by:mstoolmi
8 Comments
 
LVL 15

Expert Comment

by:quincydude
ID: 23678245
try changing those all
style.display = "inherit";

to

style.display = "block";
0
 
LVL 19

Expert Comment

by:erikTsomik
ID: 23678527
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
 
LVL 16

Expert Comment

by:sunithnair
ID: 23679158
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:mstoolmi
ID: 23687315
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
 

Author Comment

by:mstoolmi
ID: 23687561
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
 

Author Comment

by:mstoolmi
ID: 23687577
While the buttons work, I would still prefer the drop down - any ideas?
0
 
LVL 15

Accepted Solution

by:
quincydude earned 2000 total points
ID: 23687825
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
 

Author Closing Comment

by:mstoolmi
ID: 31548637
Thank You!!!
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question