hide and show textbox after select listmenu box value

[rohittripathi]

<select name="select" >
<option value="0">Select any one</option>
<option value="hide">Trainee</option>
<option value="show">Product</option>
</select>

<td><input name="designation" type="text" id="designation" /></td>
<td><input name="organization" type="text" id="organization" /></td>

please help me how to hide both text box after select Trainee value from listmenubox
and after select Product both textbox show

please help how to hide and show after select value from listmenu box, textbox hide and when i select another value then it show

please help me as possible as

[mingler]

You will need to add javascript to the form in order for that action to happen.

Add this javascript:-

<script language="javascript" type="text/javascript">
function hidetext() {
document.designation.style.visibility = "hidden";
}
function showtext() {
document.designation.style.visibility = "visible";
}
</script>

Then in your html, change:-

<select name="select" >
<option value="0">Select any one</option>
<option value="hide">Trainee</option>
<option value="show">Product</option>
</select>

To :-

<select name="select">
<option value="0">Select any one</option>
<option value="hide" onclick="hidetext();">Trainee</option>
<option value="show" onclick="showtext();">Product</option>
</select>

Hope this helps

[mingler]

sorry the javascript I gave should be this:-

<script language="javascript" type="text/javascript">function hidetext() {document.designation.style.visibility = "hidden";}function showtext() {document.designation.style.visibility = "visible";}</script><script language="javascript" type="text/javascript">
function hidetext() {
document.designation.style.visibility = "hidden";
document.organisation.style.visibility = "hidden";
}
function showtext() {
document.designation.style.visibility = "visible";
document.organisation.style.visibility = "visible";
}
</script>

[mingler]

just take out the first hidetext() function and showtext() function. Made an error there - should be like this (try again!)

<script language="javascript" type="text/javascript">function hidetext() {
document.designation.style.visibility = "hidden";
document.organisation.style.visibility = "hidden";
}
function showtext() {
document.designation.style.visibility = "visible";
document.organisation.style.visibility = "visible";
}
</script>

[mehran tahir]

if (document.aform.firstparent.value=='parent')
document.aform.select3.disabled=true
else
document.aform.select3.disabled=false
}

i send you this simple example hope find helpfull

[mingler]

they want to show/hide the textboxes, not disable the select list

[vibhaJ]

Heres a code:
Try it...

<script language="javascript" type="text/javascript">
function toggleMe(val) 
{
	var designation = document.getElementById('designation');
	var organization = document.getElementById('organization');
	if(val=='Trainee')
	{
		designation.style.display = "none";
		organization.style.display = "none";
	}
	else
	{
		designation.style.display = "block";
		organization.style.display = "block";
	}
}
</script>
   
<select name="select" onchange="toggleMe(this.value)">   
    <option value="0">Select any one</option> 
    <option value="Trainee">Trainee</option>  
    <option value="Product">Product</option> 
</select>
      
<input name="designation" type="text" id="designation" />
<input name="organization" type="text" id="organization" />