Hide a table row on change of a select box

<html>
<head>
<title>change code</title>
<script language="javascript">
function changeCode()
{
if(document.getElementById('country').selectedIndex > 6)
{
document.getElementById('ukcode').style.display="none";
document.getElementById('ukcode').style.visibility="hidden";
document.getElementById('eucode').style.display="block";
document.getElementById('eucode').style.visibility="visible";
}
else
{
document.getElementById('eucode').style.display="none";
document.getElementById('eucode').style.visibility="hidden";
document.getElementById('ukcode').style.display="block";
document.getElementById('ukcode').style.visibility="visible";
}

}
</script>
</head>
<body onLoad="changeCode();">
<table>
<tr>
<td><strong>Country:</strong></td>
<td>
<select name="country" id="country" onChange="changeCode();">
<option value="UK" selected>United Kingdom</option>
<option value="NI" >N. Ireland</option>
<option value="BF" >BFPO</option>
<option value="CI" >Channel Islands</option>
<option value="SH" >Scottish Highlands</option>
<option value="NI" >-----------</option>
<option value="E1" >Europe 1</option>
<option value="E2" >Europe 2</option>
<option value="E3" >Europe 3</option>
<option value="E4" >Europe 4</option>

</select>
</td>
</tr>
<tr>
<td colspan="2">
<div id="ukcode" name="ukcode">
<strong>Postcode (UK):</strong>
<input type="text" name="postcode1" size="3" maxlength="20">
- <input type="text" name="postcode2" size="3" maxlength="4">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div id="eucode" name="eucode">
<strong>Postcode (EU):</strong>
<input type="text" name="postcodeEU" size="8" maxlength="20">
</div>
</td>
</tr>
</table>
</body>

0 comments:

Post a Comment