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

**hoopy** · Feb 11 '09, 06:11 PM

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 misunderstandin g your question though.

**Atli** · Feb 11 '09, 06:51 PM

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:
[code=javascript]
<script type="text/javascript">
function ToogleTextbox(p Value) {
var textBox = document.getEle mentById('Other Box');
if(pValue) {
textBox.style.d isplay = "block";
}
else {
textBox.style.d isplay = "none";
}
}
</script>
[/code]
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:
[code=html]
<select name="MySelect" onchange="javas cript: ToogleTextbox(t his.value == 'null');">
<option value="null">Ot her</option>
</select>
<input type="text" name="OtherBox" id="OtherBox" style="display: none;" />
[/code]
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.

**xaxis** · Feb 13 '09, 09:02 AM

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:

Code:

div#hiddenMenu {
    position:absolute;
    // positioned where you would like the div with the id 'hiddenMenu' to appear
    visibility:hidden;
    width:200px;
    height:200px;
    border:1px solid #000;
}

span#menuItem:hover > #hiddenMenu {
    visibility:visible;
}

I won't go into more detail than that for this is the javascript forum. Just thought I'd add to the many possibilities.

**hsriat** · Feb 14 '09, 01:58 AM

Code:

    <select>
        <option onclick="if (this.selected) document.getElementById('others').style.display='block';">others</option>
        <option selected="selected" onclick="if (this.selected) document.getElementById('others').style.display='none';">HHH</option>
    </select>
    <input type="text" style="display:none;" id="others"></input>

**ddtpmyra** · Sep 8 '09, 05:15 PM

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:

Code:

echo'<input id="showbutton" type="button" value="' . translate ( "Show" )
     . '" onclick="showComments();" />';

My javascript is like this:

Code:

<script type="text/javascript">
function showComments()
{
alert("I want to show the information from mysql how?!");
}
</script>

Question:
Where can i put the query select contidtion on javascript event? Please advice.

**acoder** · Sep 9 '09, 04:36 PM

Use PHP to get the MySQL data and generate a string. Then use PHP code to generate the JavaScript code.

**ddtpmyra** · Sep 10 '09, 01:17 AM

Originally posted by acoder

Use PHP to get the MySQL data and generate a string. Then use PHP code to generate the JavaScript code.

Hi Acecoder,

can you insert php inside the msgbox or alertbox?

Code:

<script type="text/javascript"> 
function showComments() 
{ 
alert("I want to show the information from mysql how?!"); 
} 
</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!

**acoder** · Sep 10 '09, 11:49 AM

Originally posted by ddtpmyra

can you insert php inside the msgbox or alertbox?

Yes, with something like:

Code:

function showComments() 
{ 
alert("Information from mysql: <?php echo $str; ?>"); 
}

assuming it's escaped properly to avoid string problems.

Originally posted by ddtpmyra

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.disp lay = "block".