ann86 Posted March 17, 2008 Share Posted March 17, 2008 Hello, I am trying to add an input box after other is selected in a drop down list (<select>) Any suggestions? Thanks Quote Link to comment Share on other sites More sharing options...
eft0 Posted March 17, 2008 Share Posted March 17, 2008 dhtml, ajax, javascript, etc.. Quote Link to comment Share on other sites More sharing options...
ann86 Posted March 17, 2008 Author Share Posted March 17, 2008 dhtml, ajax, javascript, etc.. Either PHP or JavaScript Quote Link to comment Share on other sites More sharing options...
lemmin Posted March 17, 2008 Share Posted March 17, 2008 Something like this: <select> <option onreadystatechange="box.style.visibility=visible"> </select> <input type=text id="box" style="visibility:hidden"> Quote Link to comment Share on other sites More sharing options...
Barand Posted March 17, 2008 Share Posted March 17, 2008 ... except with onchange instead of onreadystatechange, and it would go in the select tag, not the option tag. You also need to check for the option value == "other" Quote Link to comment Share on other sites More sharing options...
lemmin Posted March 17, 2008 Share Posted March 17, 2008 If you put it in the select tag then it would display the box no matter what option was selected. The way I understood it, he was trying to have the input be shown only when a specific option was selected. Athough, to toggle the visibility off, you would need an if statement unless you put an onreadystatechange event in every option (don't), so you might as well put it in the select using onchange and do some checking. <select id="sel" onchange="if(sel.options(sel.selectedIndex).name='other'){box.style.visibility='visible'}else{box.style.visibility='hidden'"> <option name="other" value="something">Other</option> </select> <input type=text id="box" style="visibility:hidden"> Something like that. I don't think javascript in the tags works in some cases, but I hope you get the idea. Quote Link to comment Share on other sites More sharing options...
Barand Posted March 17, 2008 Share Posted March 17, 2008 sample code <html> <head> <meta name="generator" content="PhpED Version 4.5 (Build 4513)"> <title>sample</title> <meta name="author" content="Barand"> <meta name="creation-date" content="03/17/2008"> <script language='javascript'> function choiceChanged (sel) { var txtObj = document.getElementById("other"); if (sel.options[sel.selectedIndex].value=="0") { txtObj.style.visibility="visible"; } else { txtObj.style.visibility="hidden"; } } </script> </head> <body> <form> <select name='choice' onchange='choiceChanged(this)'> <option value='1'> aaa</option> <option value='2'> bbb</option> <option value='3'> ccc</option> <option value='0'> other</option> </select> <div id="other" style='visibility: hidden'> Specify 'other' <input type="text" name="choice1" size="20"> </div> <input type="submit" name="sub" value="Submit"> </form> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.