View Full Version : Please Help - Simple Form Dropdown that Opens a Text input

12-23-2010, 12:05 AM
Hey everyone. Been racking my brain all day trying to figure out how to duplicate this code with the limited javascript knowledge I have been trying to learn.

This code is a Dropdown menu of Yes or No, than a Select button that Opens up a Text Input directly below the dropdown. So far, It works great. My problem is I need at least two of these on the same page and I do not know how to go about it. I have tried changing values to accommodate adding another on the same form, but than both stop working. Can someone Please HELP!

Thank you in advance.

<SCRIPT language="javascript">
function add(type) {

//Create an input type dynamically.
var element = document.createElement("input");

//Assign different attributes to the element.
element.setAttribute("type", type);
element.setAttribute("value", type);
element.setAttribute("name", type);
element.setAttribute("id", type);

var foo = document.getElementById("fooBar");

//Append the element in page (in span).


<SELECT name="element">
<OPTION value="text" name="refer_yes" id="refer_yes">Yes</OPTION>
<OPTION value="text" name="refer_no" id="refer_no">No</OPTION>

<INPUT type="button" value="Select" onclick="add(document.forms[0].element.value='')"/>
<span id="fooBar">&nbsp;</span>

Old Pedant
12-23-2010, 01:08 AM
Unless you need to add dozens of text fields in this way, you are *WAY* overcomplicating this by doing a dynamic add.

It's so much simpler to just have the <input>s in place already with style="display: none;" and then un-hide them as needed.

And you wouldn't want to use that code to add dozens of fields, because as written you would be assigning the same id to multiple fields, which is a no-no.

And not to ask a dumb question,but... Why does it matter which <option> the user chooses??? You will add exactly the same thing, no matter what.

12-23-2010, 01:12 AM
Hmm, First thanks for your help.
I will try and utilize the display none.

I am helping a friend create a nice site as a favor, and they have an imagination out of this world on what they want to see. I don't want to disappoint lol. Thought this was the only way to go about it.

Thanks again. I really appreciate it.

Old Pedant
12-23-2010, 01:18 AM
Will something like this work?

<div id="foobar" style="display: none;">
Please enter your zamboni number: <input type="text" name="zamboni" >
<input type="button" value="Select"

Old Pedant
12-23-2010, 01:19 AM
I really am curious why you needed to look at the value of the <select> as part of that code, since the value was that same for both <option>s.

12-23-2010, 01:27 AM
Yeah that works great. Jeez, Im a jerk. I didn't even think of that, that should work much much better. I have actually used something like that in the past as well. Didn't even occur to me to use that style.

He asked me to use dropdowns, I was just trying to give him the results he was describing to me. But his way is garbage.

Thanks again. I really do appreciate the quick help.