Switching visible divs works in IE, not in FF or Opera

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 392,071 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 4,248 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 2410 | Replies: 2

•

Join Date: Aug 2006

Posts: 2

Reputation: Beards247 is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

Beards247

Offline

Newbie Poster

Switching visible divs works in IE, not in FF or Opera

Aug 14th, 2006

Very new to Javascript, so don't kill me - just need it to work...

Want divs to be visible based on which radio button is selected. Code works exactly as needed in IE. FF and Opera both show the first div, but do not toggle.

Help with Code Tags

(Toggle Plain Text)

<style type="text/css" media="all">
label {
 style:"block";
}
</style>
<script type="text/javascript" language="JavaScript">
function Res(){
if(document.getElementById){
 var el = document.getElementById('US');
  el.style.display = "Block";
 var el = document.getElementById('NonUs');
  el.style.display = "none";
 }
}
function NonRes(){
if(document.getElementById){
 var el = document.getElementById('NonUs');
  el.style.display = "block";
 var el = document.getElementById('US');
  el.style.display = "none";
 }
}
function PR(){
if(document.getElementById){
 var el = document.getElementById('greencard');
  el.style.display = "block";
 var el = document.getElementById('nonpr');
  el.style.display = "none";
 }
}
function NonPR(){
if(document.getElementById){
 var el = document.getElementById('NonPR');
  el.style.display = "block";
 var el = document.getElementById('greencard');
  el.style.display = "none";
 }
}
</script>
</head>
<body>
<FORM AUTOCOMPLETE="OFF" action="index.cfm" method="post">
<label for="citizenship">Are you a US Citizen?</label>
 <input type="radio" id="citizenship" name="citizenship" value="-1" Onclick="Res()">Yes
 <input type="radio" id="citizenship" name="citizenship" value="0" Onclick="NonRes()">No
<Div id="US" style="display:none;">
 <h1>Us Citizenship</h1>
</div>
<br>
<div id="NonUS" style="display:none;">
 <h1>NonUs Citizenship</h1>
 <label for="Perm_Res">If you are not a U.S. citizen, are you a Permanent Resident of the U.S.?</label>
 <input type="Radio" name="Perm_Res" value="-1" Onclick="PR()">Yes 
 <input type="Radio" name="Perm_Res" value="0" Onclick="NonPR()">No
 <div id="greencard" style="display:none;">
  <label for="GreenCard_ID">Green Card ID (Such as: A123456789):</label>
  <input name="GreenCard_ID" type="text" value="" size="10" maxlength="10">
 </div>
 <div id="nonpr" style="display:none;">
  <label for="Country_Residency">Country</label>
  <label for="County_City_Residency">For International Students Only</label>
 </div>
</div>
</form>

<style type="text/css" media="all">
label {
 style:"block";
}
</style>
<script type="text/javascript" language="JavaScript">
function Res(){
if(document.getElementById){
 var el = document.getElementById('US');
  el.style.display = "Block";
 var el = document.getElementById('NonUs');
  el.style.display = "none";
 }
}
function NonRes(){
if(document.getElementById){
 var el = document.getElementById('NonUs');
  el.style.display = "block";
 var el = document.getElementById('US');
  el.style.display = "none";
 }
}
function PR(){
if(document.getElementById){
 var el = document.getElementById('greencard');
  el.style.display = "block";
 var el = document.getElementById('nonpr');
  el.style.display = "none";
 }
}
function NonPR(){
if(document.getElementById){
 var el = document.getElementById('NonPR');
  el.style.display = "block";
 var el = document.getElementById('greencard');
  el.style.display = "none";
 }
}
</script>
</head>
<body>
<FORM AUTOCOMPLETE="OFF" action="index.cfm" method="post">
<label for="citizenship">Are you a US Citizen?</label>
 <input type="radio" id="citizenship" name="citizenship" value="-1" Onclick="Res()">Yes
 <input type="radio" id="citizenship" name="citizenship" value="0" Onclick="NonRes()">No
<Div id="US" style="display:none;">
 <h1>Us Citizenship</h1>
</div>
<br>
<div id="NonUS" style="display:none;">
 <h1>NonUs Citizenship</h1>
 <label for="Perm_Res">If you are not a U.S. citizen, are you a Permanent Resident of the U.S.?</label>
 <input type="Radio" name="Perm_Res" value="-1" Onclick="PR()">Yes 
 <input type="Radio" name="Perm_Res" value="0" Onclick="NonPR()">No
 <div id="greencard" style="display:none;">
  <label for="GreenCard_ID">Green Card ID (Such as: A123456789):</label>
  <input name="GreenCard_ID" type="text" value="" size="10" maxlength="10">
 </div>
 <div id="nonpr" style="display:none;">
  <label for="Country_Residency">Country</label>
  <label for="County_City_Residency">For International Students Only</label>
 </div>
</div>
</form>

I'll still be fiddling with this as I wait for guidance so the test posting page is: http://people.cornell.edu/pages/clb3...odivswitch.htm

TIA,

Chris

P.S. I realize I can combine some of the functions, I am working on that now - but I just need it to work!!! site is suposed to go live tomorrow.

Last edited by Beards247 : Aug 14th, 2006 at 2:10 pm.

•

Join Date: Aug 2006

Posts: 3

Reputation: U.K. is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

U.K.

Offline

Newbie Poster

Re: Switching visible divs works in IE, not in FF or Opera

Aug 14th, 2006

id names (which you are using via document.getElementById(name)) are case sensitive. you named your div with id="NonUS", in your javascript you used ..getElementById("NonUs")..

furthermore, you should not initiate a variable with the same name twice in a (function) context..
[html]
function some_name() {
var x= 'abc';
var x= '123';
}
[/html] = not good...

better:
[html]
function some_name(){
var x= 'abc';
x= '123';
}
[/html]

by the way, you could shorten down your javascript to:
[html]
...
function toggle(sVisible, sHidden) {
document.getElementById(sVisible).style.display= '';
document.getElementById(sHidden).style.display= 'none';
}
....

<input type="radio" id="citizenship" name="citizenship" value="-1" onchange="toggle('US','NonUS')" />Yes
...
[/html] and so on..

•

Join Date: Aug 2006

Posts: 2

Reputation: Beards247 is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

Beards247

Offline

Newbie Poster

Re: Switching visible divs works in IE, not in FF or Opera

Aug 14th, 2006

•

Originally Posted by U.K.

by the way, you could shorten down your javascript to:
[html]
...
function toggle(sVisible, sHidden) {
document.getElementById(sVisible).style.display= '';
document.getElementById(sHidden).style.display= 'none';
}
....

<input type="radio" id="citizenship" name="citizenship" value="-1" onchange="toggle('US','NonUS')" />Yes
...
[/html] and so on..

I assumed there was a much more elegant solution - thank you so much for your help and speeding up my solution process.!