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>
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>
ASKER
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?
Any other ideas?
ASKER
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.
ASKER
While the buttons work, I would still prefer the drop down - any ideas?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank You!!!
style.display = "inherit";
to
style.display = "block";