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:
...
<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.
Thanks in advance for your help.
