<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JQuery Show/Hide form content</title>
<script type="application/javascript" src="http://www.google.com/jsapi"></script>
<script type="application/javascript">
// Load jQuery from Google's JSAPI
google.load("jquery", "1");
google.setOnLoadCallback(function() {
console.log("document ready - starting");
// hide dependent fields
$(".dependent").hide();
attachListeners();
});
function attachListeners() {
console.log("attaching listeners");
$('input:radio[name=radio-age-30]').click(function() {
// perform simple on/off toggle
slideToggle("section-two");
});
$('input:radio[name=confirm-type]').click(function() {
console.log("Selected item: ", $(this).attr("id"));
switchDiv($(this).attr("id"));
});
}
function slideToggle(divId) {
$("#" + divId).slideToggle();
}
function switchDiv(divId) {
// start by hiding all divs in section
$(".group-one").hide();
if (divId === "type-residential") {
slideToggle("section-residential");
} else if (divId === "type-commercial") {
slideToggle("section-commercial");
} else if (divId === "type-industrial") {
slideToggle("section-industrial");
}
}
</script>
<style type="text/css">
body {width:60%; margin:auto; font-family:Arial, Helvetica, sans-serif; font-size:80%;}
fieldset legend {font-weight:bold; margin:0 1em; padding:0 1em;}
p label{width:20em; display:block; float:left; text-align:right; margin-right:1em;}
input:focus, textarea:focus{background:#ffffcc;}
</style>
</head>
<body>
<form action="#">
<fieldset id="section-one">
<legend>Section One</legend>
<p>
<label for="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname" />
</p>
<p>
<label for="lastname">Surname:</label>
<input type="text" name="lastname" id="lastname" />
</p>
<p>
<input type="radio" title="Indicate whether you are under 30 years of age" name="radio-age-30" id="radio-age-30-under" checked="checked" />
<label for="radio-age-30-under">Under 30:</label>
<br />
<input type="radio" title="Indicate whether you are over 30 years of age" name="radio-age-30" id="radio-age-30-over" />
<label for="radio-age-30-over">Over 30:</label>
</p>
</fieldset>
<fieldset id="section-two" class="dependent">
<legend>Additional Questions for people over 30</legend>
<p>
<label for="additional-question">How did you find out about this survey:</label>
<textarea title="Write your life story here" name="additional-question" id="additional-question" rows="4" cols="20"></textarea>
</p>
</fieldset>
<fieldset id="section-three">
<legend>Choose Type</legend>
<p>
<input type="radio" title="Commercial interests" name="confirm-type" id="type-commercial" />
<label for="type-commercial">Commercial</label>
<br />
<input type="radio" title="Residential interests" name="confirm-type" id="type-residential" />
<label for="type-residential">Residential</label>
<br />
<input type="radio" title="Industrial interests" name="confirm-type" id="type-industrial" />
<label for="type-industrial">Industrial</label>
</p>
</fieldset>
<fieldset id="section-commercial" class="dependent group-one">
<legend>Commercial</legend>
<p>TODO</p>
</fieldset>
<fieldset id="section-residential" class="dependent group-one">
<legend>Residential</legend>
<p>TODO</p>
</fieldset>
<fieldset id="section-industrial" class="dependent group-one">
<legend>Industrial</legend>
<p>TODO</p>
</fieldset>
</form>
</body>
</html>
Tuesday, September 29, 2009
JQuery Example: Showing and hiding form elements based on user input
Here's a quick example of how something close to XForm relevancy binding can be achieved using an html form and JQuery:
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment