## Exposing Additional Form Elements

Additional relevant form elements are exposed based upon user input. Here, this is achieved by having the entire form in the markup, with a certain section hidden via CSS (`display: none;`). If "Yes" is chosen, the display property is changed to "block" through JS.

Example 10.57
Example 10.57 Source:
<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" name="ice_cream" id="ice_cream" enctype="application/x-www-form-urlencoded" > <div> Would you like ice cream?<br/> <input type="radio" name="want" id="ic_yes" value="yes" onclick="displayIceCreamOptions()" /> <label for="ic_yes" >Yes</label><br/> <input type="radio" name="want" id="ic_no" value="no" onclick="displayIceCreamOptions()" /> <label for="ic_no" >No</label> </div> <div style="display: none; margin-left: 2em; background-color: #eee; padding: 1em; " id="icecream_options" > <fieldset> <legend>Ice Cream Options</legend> <p>How would you like it?</p> <input type="radio" id="container_cup" name="container" value="cup" /> <label for="container_cup" >Cup</label> <br/> <input type="radio" id="container_cone" name="container" value="cone" /> <label for="container_cone" >Cone</label> <br/> <p>Pick your toppings:</p> <input type="checkbox" name="toppings" id="toppings_wc" value="whipcream" /> <label for="toppings_wc" >Whipped cream</label> <br/> <input type="checkbox" name="toppings" id="toppings_j" value="jimmies" /> <label for="toppings_j" >Jimmies</label> <br/> <input type="checkbox" name="toppings" id="toppings_nuts" value="nuts" /> <label for="toppings_nuts" >Nuts</label> <br/> <input type="checkbox" name="toppings" id="toppings_cherry" value="cherry" /> <label for="toppings_cherry" >Cherry</label> </fieldset> </div> <p><input type="submit" /></p> </form>
In script element (within head element):
function displayIceCreamOptions() { var divico = document.getElementById('icecream_options'); var state = divico.style.display; if (document.forms['ice_cream'].want[0].checked) { divico.style.display = 'block'; } else { divico.style.display = 'none'; } }
Example 10.57 Demonstrated