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?
Jump to Postonclick the page goes blank
You have used 'open' [a reserved word in javascript] as a function name.
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.
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??
onclick the page goes blank
You have used 'open' [a reserved word in javascript] as a function name.
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.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.