JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

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

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Aug 2006
Posts: 2
Reputation: Beards247 is an unknown quantity at this point 
Solved Threads: 0
Beards247 Beards247 is offline Offline
Newbie Poster

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

 
0
  #1
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.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <style type="text/css" media="all">
  2. label {
  3.  style:"block";
  4. }
  5. </style>
  6. <script type="text/javascript" language="JavaScript">
  7. function Res(){
  8. if(document.getElementById){
  9.  var el = document.getElementById('US');
  10.   el.style.display = "Block";
  11.  var el = document.getElementById('NonUs');
  12.   el.style.display = "none";
  13.  }
  14. }
  15. function NonRes(){
  16. if(document.getElementById){
  17.  var el = document.getElementById('NonUs');
  18.   el.style.display = "block";
  19.  var el = document.getElementById('US');
  20.   el.style.display = "none";
  21.  }
  22. }
  23. function PR(){
  24. if(document.getElementById){
  25.  var el = document.getElementById('greencard');
  26.   el.style.display = "block";
  27.  var el = document.getElementById('nonpr');
  28.   el.style.display = "none";
  29.  }
  30. }
  31. function NonPR(){
  32. if(document.getElementById){
  33.  var el = document.getElementById('NonPR');
  34.   el.style.display = "block";
  35.  var el = document.getElementById('greencard');
  36.   el.style.display = "none";
  37.  }
  38. }
  39. </script>
  40. </head>
  41. <body>
  42. <FORM AUTOCOMPLETE="OFF" action="index.cfm" method="post">
  43. <label for="citizenship">Are you a US Citizen?</label>
  44.  <input type="radio" id="citizenship" name="citizenship" value="-1" Onclick="Res()">Yes
  45.  <input type="radio" id="citizenship" name="citizenship" value="0" Onclick="NonRes()">No
  46. <Div id="US" style="display:none;">
  47.  <h1>Us Citizenship</h1>
  48. </div>
  49. <br>
  50. <div id="NonUS" style="display:none;">
  51.  <h1>NonUs Citizenship</h1>
  52.  <label for="Perm_Res">If you are not a U.S. citizen, are you a Permanent Resident of the U.S.?</label>
  53.  <input type="Radio" name="Perm_Res" value="-1" Onclick="PR()">Yes 
  54.  <input type="Radio" name="Perm_Res" value="0" Onclick="NonPR()">No
  55.  <div id="greencard" style="display:none;">
  56.   <label for="GreenCard_ID">Green Card ID (Such as: A123456789):</label>
  57.   <input name="GreenCard_ID" type="text" value="" size="10" maxlength="10">
  58.  </div>
  59.  <div id="nonpr" style="display:none;">
  60.   <label for="Country_Residency">Country</label>
  61.   <label for="County_City_Residency">For International Students Only</label>
  62.  </div>
  63. </div>
  64. </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 3:10 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2006
Posts: 3
Reputation: U.K. is an unknown quantity at this point 
Solved Threads: 0
U.K. U.K. is offline Offline
Newbie Poster

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

 
0
  #2
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..
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2006
Posts: 2
Reputation: Beards247 is an unknown quantity at this point 
Solved Threads: 0
Beards247 Beards247 is offline Offline
Newbie Poster

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

 
0
  #3
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.!
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate array automatically browser bug calendar captchaformproblem cart checkbox child close codes createrange() cursor date debugger dependent disablefirebug dom dropdown editor element embed engine enter events explorer ext file firefox form forms frameworks getselection google gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe images internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jsp jump libcurl maps masterpage math media microsoft object onmouseoutdivproblem onreadystatechange parent paypal pdf php player position post programming progressbar prototype redirect regex runtime safari scale scriptlets scroll search security shopping size software sql text textarea unicode web website windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC