Member Avatar for Beards247

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.

<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:

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.

  • 2 Contributors
  • 2 Replies
  • 209 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by Beards247

Dani AI

Generated

Short, practical note (builds on 's observation): Firefox and Opera were failing because the script couldn't reliably find and act on the elements. Browsers that were historically more permissive (often IE) can appear to “work” despite markup or scripting mistakes, but standards-based engines will fail if IDs, attributes or markup are incorrect. Fixes to make the form robust across browsers:

  • Ensure every ID referenced by script exactly matches the element’s id (including case) and that IDs are unique — do not give both radio buttons the same id.
  • Fix invalid markup/CSS (for example, stray or malformed style declarations) so parsers don’t ignore rules.
  • Prefer attaching listeners to the radio group (change event) rather than relying on inline onclick handlers, and always check that getElementById(...) returned a non-null element before using it.

A modern, unobtrusive approach: hide/show with a CSS class and attach listeners after DOM load. Example (new approach, not the same code already posted):

.hidden { display: none; }
document.addEventListener('DOMContentLoaded', function () {
  var radios = document.querySelectorAll('input[name="citizenship"]');
  function show(id){ document.getElementById(id).classList.remove('hidden'); }
  function hide(id){ document.getElementById(id).classList.add('hidden'); }
  radios.forEach(function(r){
    r.addEventListener('change', function(){
      if (this.value === '-1') { show('US'); hide('NonUS'); }
      else { show('NonUS'); hide('US'); }
    });
  });
});

Quick debugging tips: open the browser console and inspect elements (verify exact IDs), add a quick console.log(document.getElementById('SomeID')) to see if it’s null, and run your HTML through a validator to catch duplicate IDs or mismatched labels. These steps will make the toggling reliable in Firefox, Opera and modern browsers.

Member Avatar for U.K.

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..

function some_name() {
var x= 'abc';
var x= '123';
}

= not good...

better:

function some_name(){
var x= 'abc';
x= '123';
}

by the way, you could shorten down your javascript to:

...
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
...

and so on..

Member Avatar for Beards247

by the way, you could shorten down your javascript to:

...
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
...

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.!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.