JavaScript DHTML/Form Control/Form Layout
Hidden form section (toggle)
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<html> <head> <title>Recipe 8.10</title> <style rel="stylesheet" id="mainStyle" type="text/css"> html {background-color:#cccccc} body {background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px;
margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}
h1 {text-align:right; font-size:1.5em; font-weight:bold} h2 {text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline} .buttons {margin-top:10px} </style> <script type="text/javascript"> function togglePurDec(evt) {
evt = (evt) ? evt : event;
var target = (evt.target) ? evt.target : evt.srcElement;
var block = document.getElementById("purchaseDecisionData");
if (target.id == "purDecFlag1") {
block.style.display = "block";
} else {
block.style.display = "none";
}
} </script> </head> <body>
Hidden Form Sections
<form name="survey" ...> ...
3. Do you make purchase decisions for your company?
<input type="radio" id="purDecFlag0" name="purchaseDecision"
onclick="togglePurDec(event)">No
<input type="radio" id="purDecFlag1" name="purchaseDecision"
onclick="togglePurDec(event)">Yes
4. How long have you been at your current employment position? <select name="emplLen"> <option value="">Choose One:</option> <option value="1">Less than 6 months</option> <option value="2">6-12 months</option> <option value="3">1-2 years</option> <option value="4">2+ years</option> </select>
... </form> </body> </html>
</source>
