[BNM] hide form fields with javascript -help!

Thu May 17 16:43:55 BST 2007

Hello,

I'm stepping outside my comfort zone. I'm trying to use javascript to 
show/hide optional form fields, based on the selection in a drop down menu. 
I've sort of got it to work with text inside div tags but not with form 
fields.

I'm using this as a tutorial:
<http://www.stuffandnonsense.co.uk/archives/trimming_form_fields.html>

and I've copied the code below. I've sort of got something crappy working 
at:
<http://www.sussex.ac.uk/Users/jason/PHP/formjs2.php>

Can someone tell me why my form fields won't disappear? Or can someone 
point me in the right direction of a good tutorial on this. Although the 
one I was using seemed OK

Thanks
Jason

My code...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<html>
<head>
<script>
function show(ele) {

	txt = ele.options[ele.selectedIndex].value;

    var srcElement = document.getElementById('hide');

    if(txt == "Y") {
      // srcElement.style.display= 'none';

	  var tmp = document.getElementsByTagName('div');
			for (var i=0;i<tmp.length;i++)
			{
				if(tmp[i].className == 'fm-optional')
				{
					tmp[i].style.display = (tmp[i].style.display == 'none') ? 'block' : 
'none';
				}
			}
			return false;

    }
    else {
      // srcElement.style.display='block';

	  var tmp = document.getElementsByTagName('div');
			for (var i=0;i<tmp.length;i++)
			{
				if(tmp[i].className == 'fm-optional')
				{
					tmp[i].style.display = (tmp[i].style.display == 'none') ? 'block' : 
'none';
				}
			}
			return false;

    }
    return false;

  }
</script>

<title>A quick test</title>
</head>

<body>

    	<!-- The form elements -->
		<form  action="" method="post" name="language" id="language">
		<table width="100%"  border="0" cellpadding="0" id="frm">
		  <tr>
			<td class="frmlabel"><label>Is English your first 
language?&nbsp;</label></td>
			<td class="frmfield"><select name="language_english_first" 
onchange="show(this)">
	<option value="N">No</option>
	<option value="Y" selected="selected">Yes</option>

</select></td>
		  </tr>

		   <div class="fm-optional">
		   Optional 1
		   </div>

		   <div class="fm-optional">
		   optional 2
		   </div>

		  <tr>
			<td class="frmlabel"><label>Language of your instruction: 
&nbsp;</label></td>
			<td class="frmfield"><select name="language_of_instruction">
			<option value="">Not Applicable</option>
			<option value="AB">Abkhazian</option>
			<option value="OM">Afan, Oromo</option>
			<option value="XH">Xhosa</option>
			<option value="JI">Yiddish</option>
			<option value="YO">Yoruba</option>
			<option value="ZU">Zulu</option>
    		</select>
		  </td>
		  </tr>
		  </div>
		  <tr>
			<td class="frmlabel"><label>Language test: &nbsp;</label></td>

			<td class="frmfield"><select name="language_test">
	<option value="">Not Applicable</option>
	<option value="CAMBRIDGE CPE">CAMBRIDGE CPE</option>
	<option value="ELSA">ELSA</option>
	<option value="GCSE">GCSE</option>
	<option value="IELTS">IELTS</option>

	<option value="O LEVEL">O LEVEL</option>
	<option value="OTHER">OTHER</option>
	<option value="TOEFL">TOEFL</option>
	<option value="USA SAT">USA SAT</option>
</select></td>
		  </tr>

		  <tr>

			<div class="fm-optional">
			<td class="frmlabel"><label>Test Result: &nbsp;</label></td>
			<td class="frmfield"><input size="30" maxlength="30" 
name="language_test_result" type="text" /></td>
		    </div>

		  </tr>

		  <tr>
			<td class="frmlabel"><label>Language test status: &nbsp;</label></td>
			<td class="frmfield"><select name="language_test_status">
	<option value="">Not Applicable</option>
	<option value="RECEIVED">Received</option>

	<option value="EXPECTED">Not yet received</option>
	<option value="NOT TAKEN">Not yet taken</option>
</select></td>
		  </tr>	
		</table>

  <!-- Display the submit button -->

  	<input class="frmbutton" name="btnSubmit" value="Save" type="submit" />
    </form>

</body>
</html>