Drop down list onclick

[MDanz]

Need help doing this. On a drop down list, on click of an option an input textfield appears.
e.g.

echo "<select>
  <option>What is your opinion on</option>
 
</select>";

echo "<div id='pop'><input type='hidden' id='opinion' size='20' name='opinion' value='Type Keyword Here' /></div>";

i want it to be hidden and then appear on click of the option in the dropdown list... How do i do this?

[PsychicTide]

Why not use some javascript/CSS to uncover a hidden div when the onclick action occurs. For instance...

Javacript

<script type="text/javascript">
var menuItem = 0;
function open(element)
{
	// close old div if open
	if(menuItem) menuItem.style.visibility = 'hidden';
	// open hidden div
	menuItem = document.getElementById(element);
	menuItem.style.visibility = 'visible';
}
</script>

HTML if you were using an unorder list method (the main point is the mouse click event and the div creation)

...
<li>
<a href="#" onmousedown="open('hiddenDiv')">CLICK THIS</a>
<div id="hiddenDiv">
<!--PUT YOUR FORM/HTML HERE-->
</div>
</li>
...

CSS for the Div

#hiddenDiv
{
   margin:0;
   padding:0;
   width:XXXpx;
   visibility:hidden;
   position:absolute;
   left:XXXpx;
   top:XXXpx;
   z-index:10;
}

There are several ways you can modify this script... set up an action to close the div, set up a timer that closes the div, etc... I haven't had time to test this exact code out, but I'm sure it will help you to figure out a javascript solution. Let me know if I need to clarify anything or if your looking for another method of doing this.

[MDanz]

thx for the reply.. i'm trying this but it isn't working.

<select style='border: 1px solid #D99C29;'>
  <option id='o1' onclick='open(\"hiddenDiv\")'>What is your opinion on</option>
 </select>

echo "<table border='0'><tr><td><div id='hiddenDiv'>
<input type='text' id='opinion' style='text-align:center;border-style:inset;border-color:#D99C29;border-width:2px;background-image: url(\"popupbg.jpg\");color: #FFFFFF;font-size:12px;font-weight:bold;font-family:Arial' size='20' name='opinion' value='Type Keyword Here' onfocus='this.value=\"\"' />
</div></td></tr></table>";

<script type="text/javascript">
var menuItem = 0;
function open(element)
{
	// close old div if open
	if(menuItem) menuItem.style.visibility = 'hidden';
	// open hidden div
	menuItem = document.getElementById(element);
	menuItem.style.visibility = 'visible';
}
</script>

#hiddenDiv
{
   margin:0;
   padding:0;
   width:100px;
   visibility:hidden;
   position:fixed;

}

i want the input textfield to appear in the table..when onclick of the option in the dropdown list.

the code is working though.. onclick the page goes blank??

[fxm]

onclick the page goes blank

You have used 'open' [a reserved word in javascript] as a function name.

[PsychicTide]

Sorry it took me so long to reply... I've been very busy lately.

Yes you're right fxm. Thanks a lot for the help. /highfive

I just wasn't thinking when I typed this out (was thinking more pseudo code). If you use a more unique function name (instead of 'open' or similar) it will work.