hide and show form options
Hello,
I'm new with Jquery so I need some help.
I have a form for the registration of a event for our club. Now I want this. If the check box groep is not selected there is a fieldset individu_km. If I select the check box groep this one must hide and the fieldset groep_km must be showed. This is the code i have now already found and changed.
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Inschrijven loop</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="js/cmxforms.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
individu: {
required: "#groep:unchecked",
},
groep_6km:{
required: "#groep:checked",
minlength: 1
},
groep_10km:{
required: "#groep:checked",
minlength: 1
},
groep_15km:{
required: "#groep:checked",
minlength: 1
},
groep_20km:{
required: "#groep:checked",
minlength: 1
},
},
messages: {
firstname: "Vul uw voornaam in",
lastname: "Vul uw achternaam in",
email: "Vul een geldig email adres in.",
individu: "Selecteer een afstand.",
groep_6km: "Vul een aantal in.",
groep_10km: "Vul een aantal in.",
groep_15km: "Vul een aantal in.",
groep_20km: "Vul een aantal in."
}
});
//code to hide topic selection, disable for demo
var groep = $("#groep");
// newsletter topics are optional, hide at first
var inital = groep.is(":checked");
var topics = $("#groep_km")[inital ? "removeClass" : "addClass"]("hide");
var topicInputs = topics.find("input").attr("disabled", !inital);
// show when newsletter is checked
groep.click(function() {
topics[this.checked ? "removeClass" : "addClass"]("hide");
topicInputs.attr("disabled", !this.checked);
});
});
</script>
<style type="text/css">
#signupForm { width: 670px; }
#signupForm label.error {
margin-left: 10px;
width: auto;
display: inline;
}
#groep_km label.error{
display: none;
margin-left: 10px;
}
#signupForm label{
width: 150px;
}
</style>
</head>
<body>
<form class="cmxform" id="signupForm" method="post" action="test.php">
<fieldset>
<legend>Vul hier uw gegevens in.</legend>
<p>
<label for="firstname">Voornaam</label>
<input id="firstname" name="firstname" />
</p>
<p>
<label for="lastname">Achternaam</label>
<input id="lastname" name="lastname" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" />
</p>
<p>
<label for="groep">Groep</label>
<input type="checkbox" class="checkbox" id="groep" name="groep" />
</p>
</fieldset>
<fieldset id="individu_km">
<legend>Individu Verberg indien niet actief</legend>
<label for="individu">Vul uw afstand in</label>
<input name="individu" type="radio" value="6km" />6km
<input name="individu" type="radio" value="10km" />10km
<input name="individu" type="radio" value="15km" />15km
<input name="individu" type="radio" value="20km" />20km
</fieldset>
<fieldset id="groep_km">
<legend>Groep Verberg indien niet actief</legend>
<label for="groep_6km">Aantal personen 6 KM</label>
<input name="groep_6km" type="text" />
<br />
<label for="groep_10km">Aantal personen 10 KM</label>
<input name="groep_10km" type="text" />
<br />
<label for="groep_15km">Aantal personen 15 KM</label>
<input name="groep_15km" type="text" />
<br />
<label for="groep_20km">Aantal personen 20 KM</label>
<input name="groep_20km" type="text" />
</fieldset>
<p>
<input class="submit" type="submit" value="Verstuur"/>
</p>
</form>
</div>
</body>
</html>
To hide the fieldset groep_km works only the fieldset individu_km won't hide.
If it is easy to do it with a radiobutton it is also oke.
Tnx
Bjorn Lentjes