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:


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?");

menuchoice.parentNode.insertBefore(newElement, fruitchoice.nextSibling);

<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>

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.