[RESOLVED] Trying to Make a Dynamic Drop Down Menu
I have a form which contains a drop down menu. I need to insert additional form elements (questions) depending on the choice in the menu. An example of the code with which I need help is as follows:
Code:
...
<script>
function addElement() {
if (document.getElementById("fruitchoice") == "fig") {
var tbdy = document.getElementsByTagName("tbody");
var menuchoice = document.getElementById("fruitchoice");
newElement = document.createElement("p");
newText = document.createTextNode("Why do you like figs?");
newElement.appendChild(newText);
menuchoice.parentNode.insertBefore(newElement, fruitchoice.nextSibling);
}}
</script>
<body>
<form method=post id ="form1" name="form1">
<select id="fruitchoice" onBlur="javascript:addElement()">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="fig">Fig</option>
<option value="pear">Pear</option>
</select>
...
</form>
</body>
</html>
When I test this code, I find that the value of the "fruitchoice" is undefined. I want to add the question about figs when the user chooses figs from the menu. I want the question not added when the user chooses another fruit.
I have searched the web and cannot find an (understandable) explanation of how to capture the menu choice and use it in the javascript to insert the additional question. I am not even sure if it is possible.
<script>
function addElement(sel) {
if (sel.value == "fig") { //you need to specify that you want the value, not just the element
//var tbdy = document.getElementsByTagName("tbody"); //what does this do????
//var menuchoice = document.getElementById("fruitchoice"); //we pass the select element to the function, so don't need this
newElement = document.createElement("p");
newText = document.createTextNode("Why do you like figs?");
newElement.appendChild(newText);
sel.parentNode.insertBefore(newElement, sel.nextSibling);
}}
</script>
<body>
<form method=post id ="form1" name="form1">
<select id="fruitchoice" onchange="addElement(this)">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="fig">Fig</option>
<option value="pear">Pear</option>
</select>
...
</form>
</body>
although I suspect that you would be better off just making a div and adding to its innerHTML...
Your suggestion works perfectly! I am embarrassed that the solution was so simple. I had looked and found suggestions that involved jQuery, a format of 'options.[selectedIndex]', and others that I cannot describe.
The 'getElementsByTagName' line is from my real life code. I use a table to layout the form for now; though I think I will use CSS in the final version of the program. It was an oversight to include that line in this example code.
My expertise is business (accounting and finance), not computer programming. I am teaching myself programming, and this problem was a real challenge to me. I learned a lot from your straightforward solution. I plan to learn about the use of 'this' which I have not studied in depth yet. I think if I was more versed in its use, I would have considered more possibilities.
Thank you again. I am marking this thread as solved.
[RESOLVED] Trying to Make a Dynamic Drop Down Menu
Reply With Quote
Bookmarks