Hide text box when select one of dropdown value

**nathj** · Feb 8 '08, 10:27 AM

Originally posted by ghjk

I have 3 text boxes and one dropdown box. Drop down box has 2 values eg: Yes and No. Normally i want to hide last 2 twxt boxes and when user select "No" i want to set visible to the above mention text boxes. How can i do that. I'm using php and my sql.

Hi I would do this with some JavaScript that is called on the onchange event of the dropdown box:

Code:

onchange="toggleDisplayState(this.value, __TextBoxID__);"

The __TextBoxID__ needs to eb the id you assigned to the text boxes or the DIV that contains them - basically it's the id of the item you want to hide.

Code:

function toggleDisplayState(pcValue, poObjectToDisplay)
{														 
	
	var loObject = document.getElementById(poObjectToDisplay);

	//test the current state of the object and toggle opposite state.
	if (pcValue == 'yes') // hide boxes
	{
		loObject.style.display = 'none';
	 }
	else 
	{
		loObject.style.display = 'inline';
	} 
}

Does this help you out?

Cheers
nathj

**ghjk** · Feb 8 '08, 11:03 AM

Please tell me where i put this function. Because i put it in my code. But nothing happened.

**nathj** · Feb 8 '08, 11:07 AM

Originally posted by ghjk

Please tell me where i put this function. Because i put it in my code. But nothing happened.

Hi ghjk,

You have two choices:
1. Use the script tags in the <head> section of the page and have the function listed there.
2. Use the script tags in the <head> section to reference an external *.js file that contains the function.

My preference is the second option. I normally have a file called functionlibrary .js and all my JS functions are listed in there, normally organised by what they do.

Take a look at this tutorial

cheers
nathj

Hide text box when select one of dropdown value

Hide text box when select one of dropdown value

Comment

Comment

Comment