Hide a table row on change of a select box?

Discussion in 'JavaScript' started by amaze, Jun 22, 2009.

0
  1. #1
    Hi,

    I have a very simple form below which is essentially a select box and 2x text inputs. I want by default to hide the tablerow "Postcode (EU)" and show "Postcode (UK)". If a user then selects one of the options "greater than 7" it hides the "Postcode (UK)" field and shows the "Postcode (EU)".

    Can anyone help with the javascript to do that?

    <table>
	<tr>
		<td><strong>Country:</strong></td>
		<td>
		<select name="country">
			<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><strong>Postcode (UK):</strong></td>
		<td>
			<input type="text" name="postcode1" size="3"  maxlength="20"> - <input type="text" name="postcode2" size="3" maxlength="4"> 
		</td>
	</tr>	
	<tr>
		<td><strong>Postcode (EU):</strong></td>
		<td>
			<input type="text" name="postcodeEU" size="8"  maxlength="20"> 
		</td>
	</tr>	
</table>
    Code (markup):

     
    amaze, Jun 22, 2009 IP
  2. amaze

    amaze Active Member

    Messages:
    594
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    60
    #2
    I will send $5 (via PP) to the person who posts the best answer.
     
    amaze, Jun 22, 2009 IP
  3. franklyn

    franklyn Peon

    Messages:
    26
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Iterate over the options array of that select to determine which option is selected , once you find the position then set the display property of the tr from "none" to "block". To do this right you need to give the select and the tr an id.
     
    franklyn, Jun 22, 2009 IP
  4. Unni krishnan

    Unni krishnan Peon

    Messages:
    237
    Likes Received:
    9
    Best Answers:
    2
    Trophy Points:
    0
    #4
    Hope this helps. :)

    <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>
</html>
    Code (markup):
     
    Unni krishnan, Jun 22, 2009 IP
  5. amaze

    amaze Active Member

    Messages:
    594
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    60
    #5
    Thanks that's a great help. Please let me know your PP address and I will send you $5 as promised... :)
     
    amaze, Jun 23, 2009 IP
  6. Unni krishnan

    Unni krishnan Peon

    Messages:
    237
    Likes Received:
    9
    Best Answers:
    2
    Trophy Points:
    0
    #6
    Thanks for the rep and the 5$. :D
     
    Unni krishnan, Jun 24, 2009 IP