Form Toggling w/ radio and checkboxes

[ryanbutler]

Hi,

I'm working with a form where I have two things going on:

1). A radio button which toggles the visibility of a section. This works with a JS file with the following code:

Code:

function offtutored(){ document.getElementById("hidetutored").style.display = 'none'; } function ontutored() { document.getElementById("hidetutored").style.display = ''; }

Then in my code I supply my <tr> with "hidetutored" for the section to initially hide. This works fine when applying onclicks to the radio buttons.

2). Several checkboxes that when a particular one is clicked, shows another text field. This works with the following CSS & JS:

CSS:

#aa{visibility:hidden;}

JS:

function toggle(chkbox, group) { var visSetting = (chkbox.checked)? "visible" : "hidden" document.getElementById(group).style.visibility = visSetting }

Then my checkbox:

Code:

<input name="education[]" type="checkbox" id="education" value="MA/MS" onclick="toggle(this, 'ma')"/>

My question is this: In my case, when the extra fields show, they are required. The problem is that with JS disabled, these fields do not show. Thus the form will never work properly in this case and will not be allowed to submit. Does anyone see in my code where I can make these fields show when JS is disabled?

Thanks for any input,

Ryan

Thanks for any input,

[rocknbil]

Welcome aboard ryanbutler, in this case I would set the visibility to visible in the CSS and hide it with window.onload().

[ryanbutler]

How am I going to hide multiple elements with window.onload?

[rocknbil]

Something like this?

function hideToggles() { 
 var hides = new Array('element1','element2','element3'); 
 for (i=0;i<hides.length;i++) { 
 if (document.getElementById(hides[i]) { 
  document.getElementById(hides[i]).style.display='none'; 
 } 
 } 
} 
window.onload = function() { hideToggles(); };  

Untested, but you get the idea. :-)