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

How to show a hidden text-box when a specific option is selected.

ddtpmyra
100+
P: 333
This is just a follow-up question above, this time i wanted to have a dependend drop down that when the users selected 'others' for instance another texbox will show-up right next to my drop down. How can I do it from my code or should I place the condition if ever?

thanks,
DM

Expand|Select|Wrap|Line Numbers
  1. echo '<tr><td><b>Lead Generated By:</b></td>'; 
  2. $res=mysql_query("select lead  from tblgenerated"); 
  3. if(mysql_num_rows($res)==0){ 
  4. echo "there is no data in table.."; 
  5. } else { 
  6.  
  7.     echo '    <td width="100%"><select name="lead" id="lead" value=\"$lead\">'; 
  8.                     for($i=0;$i<mysql_num_rows($res);$i++) { 
  9.                     $row=mysql_fetch_assoc($res); 
  10.                     echo"<option value=\"$row[lead]\" "; 
  11.                     if($lead==$row[lead]) 
  12.                     echo "selected"; 
  13.                     echo ">$row[lead]</option>";     
  14.     } 
  15.     echo "</select><br></tr></td>"; 
  16.     } 
  17.  
  18.  
Feb 11 '09 #1
Share this Question
Share on Google+
8 Replies


P: 88
This sounds like you need something client side, i.e Javascript or AJAX. Add an "on change" event in the select box which checks if the value is "0" or something and if so display a hidden input box next to the drop down using CSS display; ? I dont think it should be something which needs a PHP refresh. Maybe I am misunderstanding your question though.
Feb 11 '09 #2

Atli
Expert 5K+
P: 5,058
Yep, again, hoopy is spot on :)

The *best* way to dynamically change minor details on your page, like enabling elements, is to use JavaScript.
(* Best in like 95% of cases, as not all browsers will have JavaScript enabled)

Simply create a <select> tag, and have the onchange event of that tag enable the box if the value of the selected option is set to a predefined value.

For example, you could put this into the <head></head> tags:
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function ToogleTextbox(pValue) {
  3.   var textBox = document.getElementById('OtherBox');
  4.   if(pValue) {
  5.     textBox.style.display = "block";
  6.   }
  7.   else {
  8.     textBox.style.display = "none";
  9.   }
  10. }
  11. </script>
  12.  
This function would simply find the <input> with the id "OtherBox", and then uses the display style to either show it or hide it.

And then do something like this for your <select> tag:
Expand|Select|Wrap|Line Numbers
  1. <select name="MySelect" onchange="javascript: ToogleTextbox(this.value == 'null');">
  2.   <option value="null">Other</option>
  3. </select>
  4. <input type="text" name="OtherBox" id="OtherBox" style="display: none;" />
  5.  
Which basically tells your <select> element to call the ToogleTextbox function, and send a boolean value, indicating whether the <option> with the value "null" is selected.
Feb 11 '09 #3

xaxis
P: 15
If you want multi-level drop down menus and a high degree of cross browser support, you COULD use nothing but CSS. Using something like:

Expand|Select|Wrap|Line Numbers
  1. div#hiddenMenu {
  2.     position:absolute;
  3.     // positioned where you would like the div with the id 'hiddenMenu' to appear
  4.     visibility:hidden;
  5.     width:200px;
  6.     height:200px;
  7.     border:1px solid #000;
  8. }
  9.  
  10. span#menuItem:hover > #hiddenMenu {
  11.     visibility:visible;
  12. }
I won't go into more detail than that for this is the javascript forum. Just thought I'd add to the many possibilities.
Feb 13 '09 #4

hsriat
Expert 100+
P: 1,654
Expand|Select|Wrap|Line Numbers
  1.     <select>
  2.         <option onclick="if (this.selected) document.getElementById('others').style.display='block';">others</option>
  3.         <option selected="selected" onclick="if (this.selected) document.getElementById('others').style.display='none';">HHH</option>
  4.     </select>
  5.     <input type="text" style="display:none;" id="others"></input>    
  6.  
Feb 14 '09 #5

ddtpmyra
100+
P: 333
Hello again,

This is just a follow-up question and somewhat similar with same problem I had. This time I have javascript that has option to hide and show the button. But I dont know how to insert the sql query on the event action.

My forms is like this:
Expand|Select|Wrap|Line Numbers
  1. echo'<input id="showbutton" type="button" value="' . translate ( "Show" )
  2.      . '" onclick="showComments();" />';
My javascript is like this:
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function showComments()
  3. {
  4. alert("I want to show the information from mysql how?!");
  5. }
  6. </script>
  7.  
Question:
Where can i put the query select contidtion on javascript event? Please advice.
Sep 8 '09 #6

acoder
Expert Mod 15k+
P: 16,027
Use PHP to get the MySQL data and generate a string. Then use PHP code to generate the JavaScript code.
Sep 9 '09 #7

ddtpmyra
100+
P: 333
@acoder
Hi Acecoder,

can you insert php inside the msgbox or alertbox?
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript"> 
  2. function showComments() 
  3. alert("I want to show the information from mysql how?!"); 
  4. </script>
im not good in javascript so i need little more help and specific what to do. Or are there option where you can use to show texbox with information instead of the alert box?

thanks!
Sep 10 '09 #8

acoder
Expert Mod 15k+
P: 16,027
@ddtpmyra
Yes, with something like:
Expand|Select|Wrap|Line Numbers
  1. function showComments() 
  2. alert("Information from mysql: <?php echo $str; ?>"); 
assuming it's escaped properly to avoid string problems.

are there option where you can use to show texbox with information instead of the alert box?
Yes, that would actually be better. Use a container element, e.g. div and have it hidden initially (but with the information already generated from PHP), and then in showComments show it using elem.style.display = "block".
Sep 10 '09 #9

Post your reply

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