Table of Contents
|
All Slides
|
Link List
|
Examples
|
CSCI E-12
<< previous
|
next >>
Exposing Additional Form Elements
Example 8.12
Example 8.12 Source:
<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" name="ice_cream" id="ice_cream" > <div> Would you like ice cream? <br/> <input type="radio" name="want" value="yes" onclick="displayIceCreamOptions()" /> Yes <br/> <input type="radio" name="want" value="no" onclick="displayIceCreamOptions()" /> No </div> <div style="display: none;" id="icecream_options" > <p>How would you like it?</p> <input type="radio" name="container" value="cup" />Cup <br/> <input type="radio" name="container" value="cone" />Cone <br/> <p>Available toppings:</p> <input type="checkbox" name="toppings" value="whipcream" />Whipped cream <br/> <input type="checkbox" name="toppings" value="jimmies" />Jimmies <br/> <input type="checkbox" name="toppings" value="cherry" />Cherry on top <br/> </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 8.12 Demonstrated
Table of Contents
|
All Slides
|
Link List
|
Examples
|
CSCI E-12
<< previous
|
next >>