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.

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