leblanc
12-22-2010, 11:57 PM
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.
<html>
<head>
<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).
foo.appendChild(element);
}
</SCRIPT>
</head>
<body>
<label>
<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>
</SELECT>
<INPUT type="button" value="Select" onclick="add(document.forms[0].element.value='')"/>
</label>
<span id="fooBar"> </span>
</body>
<html>
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.
<html>
<head>
<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).
foo.appendChild(element);
}
</SCRIPT>
</head>
<body>
<label>
<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>
</SELECT>
<INPUT type="button" value="Select" onclick="add(document.forms[0].element.value='')"/>
</label>
<span id="fooBar"> </span>
</body>
<html>