By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,949 Members | 1,824 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,949 IT Pros & Developers. It's quick & easy.

Hide text box when select one of dropdown value

100+
P: 250
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.
Feb 8 '08 #1
Share this Question
Share on Google+
3 Replies


nathj
Expert 100+
P: 938
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:
Expand|Select|Wrap|Line Numbers
  1. onchange="toggleDisplayState(this.value, __TextBoxID__);"
  2.  
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.
Expand|Select|Wrap|Line Numbers
  1. function toggleDisplayState(pcValue, poObjectToDisplay)
  2. {                                                         
  3.  
  4.     var loObject = document.getElementById(poObjectToDisplay);
  5.  
  6.     //test the current state of the object and toggle opposite state.
  7.     if (pcValue == 'yes') // hide boxes
  8.     {
  9.         loObject.style.display = 'none';
  10.      }
  11.     else 
  12.     {
  13.         loObject.style.display = 'inline';
  14.     } 
  15. }
Does this help you out?

Cheers
nathj
Feb 8 '08 #2

100+
P: 250
Please tell me where i put this function. Because i put it in my code. But nothing happened.
Feb 8 '08 #3

nathj
Expert 100+
P: 938
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
Feb 8 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.