Changing form based on radio button clicked

[smerny]

I have radio buttons...

<input type='radio' name='type' value='normal' selected /> Normal<br /><input type='radio' name='type' value='progress' /> Progress

and I would like to make it so that if "normal" is selected, the following is shown next:

<select name='score'>		 	<option value='0'></option>		 	<option value='1'>NI (Needs Improvement)</option>		 	<option value='2'>SC -</option>		 	<option value='3'>SC (Successful Contributor)</option>		 	<option value='4'>SC +</option>		 	<option value='5'>EC (Exceptional Contributor</option></select>

but if "progress" is selected, this is shown instead:

<select name='score'>		 	<option value='0'></option>		 	<option value='1'>UP (Unacceptable Progress)</option>		 	<option value='3'>SP (Satisfactory Progress)</option>		 	<option value='5'>OP (Outstanding Progress)</option></select>

I know this can be done using JavaScript, and I have looked a little bit for examples online but couldn't find one that fit this really. Thanks for any help provided.

[End User]

Give each of the SELECT tags an id (id="sel1", id="sel2") and RADIO tags an id (id="rad1", id="rad2"). Then use Javascript to show or hide the select lists via an onclick() handler in the radio button tag. Untested but should work:

<input type='radio' id='rad1' name='type' value='normal' selected onclick="showHide(this.id);" /> Normal<br /><input type='radio' id='rad2' name='type' value='progress' onclick="showHide(this.id);" /> Progress<script type="text/javascript">function showHide(the_id){	if(the_id == 'rad1'){	   document.getElementById('sel1').display='block';	   document.getElementById('sel2').display='none';	}else{	   document.getElementById('sel2').display='block';	   document.getElementById('sel1').display='none';	}}</script><select name='score' id='sel1'>		 	<option value='0'></option>		 	<option value='1'>NI (Needs Improvement)</option>		 	<option value='2'>SC -</option>		 	<option value='3'>SC (Successful Contributor)</option>		 	<option value='4'>SC +</option>		 	<option value='5'>EC (Exceptional Contributor</option></select>

[smerny]

hello end, thanks for your reply.i don't see where you are changing the option values for the score though. the terms are a bit different between the normal and the progress types.Edit: nevermind, I think i see what you are saying.. I'll give it a try. hang on.

[smerny]

okay it's not working for me, here is what i have..in the head tags:

		<script type='text/javascript'>		function showHide(the_id){			if(the_id == 'rad1'){			   document.getElementById('sel1').display='block';			   document.getElementById('sel2').display='none';			}else{			   document.getElementById('sel2').display='block';			   document.getElementById('sel1').display='none';			}		}		</script>

the radios:

		  <input type='radio' id='rad1' name='type' value='normal' selected onclick='showHide(this.id);' /> Normal<br /> 		  <input type='radio' id='rad2' name='type' value='progress' onclick='showHide(this.id);' /> Progress

and the selects

		  <select name='score' id='sel1'> 		 	<option value='0'></option> 		 	<option value='1'>NI (Needs Improvement)</option> 		 	<option value='2'>SC -</option> 		 	<option value='3'>SC (Successful Contributor)</option> 		 	<option value='4'>SC +</option> 		 	<option value='5'>EC (Exceptional Contributor</option> 		  </select> 		  <select name='score' id='sel2'> 					 <option value='0'></option> 					 <option value='1'>UP (Unacceptable Progress)</option>					 <option value='3'>SP (Satisfactory Progress)</option> 					 <option value='5'>OP (Outstanding Progress)</option> 		  </select>

it's showing both select menus and not doing anything when i click on the radios

[thescientist]

are you checking for errors? Look up developer's tools for whichever browser you are using.

<input type='radio' id='rad1' name='type' value='normal' selected onclick='showHide(this.id);' /> Normal<br /> <input type='radio' id='rad2' name='type' value='progress' onclick='showHide(this.id);' /> Progress

get rid of selected in the first input tag. I'm not sure if removing the semi-colons will matter.

[dsonesuk]

you (well not you as such) left out style as in document.getElementById('sel1').style.display='block';

[smerny]

dson, i haven't been to this site in quite awhile but i always remembered you being real good with javascriptthanks guys, it's working now... however, can i make it so ONLY sel1 shows up at first?

[dsonesuk]

<input type='radio' id='rad1' name='type' value='normal' checked="checked" onclick='showHide(this.id);' /> Normal<br /> <script type='text/javascript'>function init(){document.getElementById("sel1").style.display="block";document.getElementById("sel2").style.display="none";}window.onload=init;</script>

[smerny]

thanks again

[End User]

you (well not you as such) left out style as in document.getElementById('sel1').style.display='block';

Yep, my mistake.