<html><head><title>Constraint Fun</title>
<script type="text/javascript">
function checkConstraint(passedValue) {
if (passedValue == "99") {
document.getElementById('cntinsConstraintWrapper').style.display = 'block';
} else {
document.getElementById('cntinsConstraintWrapper').style.display = 'none';
}
}
function validateForm() {
var msg = '';
var isFormValid = false;
if (document.getElementById('cnt').selectedIndex == 0) {
msg += ' - you must select how high you are going to count to\n';
}
if (document.getElementById('cnt').value == '99' && document.getElementById('ins').value == '') {
msg += ' - you must supply your insurance company if you plan to count to 99\n';
document.getElementById('cntinsConstraintWrapper').style.display = 'block';
}
if (msg == '') {
isFormValid = true;
} else {
alert('The form could not be submitted due to:\n' + msg);
}
return isFormValid;
}
</script>
</head><body>
<p>Choose how high you want to count to...</p>
<form method="post" action="" onsubmit="return validateForm()">
<select name="cnt" id="cnt" onchange="checkConstraint(this.value)">
<option value="">Select from the following list...</option>
<option value="11">Count to 11</option>
<option value="18">Count to 18</option>
<option value="99">Count to 99 (requires insurance)</option>
</select>
<div id="cntinsConstraintWrapper" style="display: none;">
<label for="ins">Insurance company: </label>
<input type="text" name="ins" id="ins" value="">
</div>
<input type="submit" value="Send my pledge">
</form>
</body></html>
