I wanna use JQUERY to show and hide some fieldset inside a form in this way:
PSEUDOCODE:
- if user-type == Company: show("company-fieldset")
- if user-type == Individual:
- if individual-type == Freelancer: show("freelancer-fieldset")
- if individual-type == Professor: show("professor-fieldset")
- if individual-type == Student: show("student-fieldset")
I'm new in using JQUERY but I need a fast way to accomplish this thing, I'll really appreciate if you can help me. Please take into account that: I have to use radio buttons because they're mutual exclusive. Everytime I select a radio-button the form must update real time. Thanks
HTML
<form method="POST">
<fieldset class="main-fieldset">
<input type="radio" id="user-type" value="company" checked>Company<br>
<input type="radio" id="user-type" value="individual">Individual<br>
</fieldset>
<fieldset class="company-fieldset">
<p>Company showed!</p>
</fieldset>
<fieldset class="individual-fieldset">
<p>Individual showed!</p>
<input type="radio" id="individual-type" value="freelancer" checked>Freelancer<br>
<input type="radio" id="individual-type" value="professor">Professor<br>
<input type="radio" id="individual-type" value="student" >Student<br>
</fieldset>
<fieldset class="freelancer-fieldset">
<p>Freelancer showed!</p>
</fieldset>
<fieldset class="professor-fieldset">
<p>Professor showed!</p>
</fieldset>
<fieldset class="student-fieldset">
<p>Student showed!</p>
</fieldset>
<fieldset class="main-fieldset">
<button type="button" onclick="alert('Hello World!')">SUBMIT</button>
</fieldset>
</form>
JS
$(document).ready(function() {
$('#user-type').change(function() {
var user_type = $(this).attr("value");
if (user_type === "Company") {
$('.company-fieldset').show();
$('.freelancer-fieldset').hide();
$('.professor-fieldset').hide();
$('.student-fieldset').hide();
}
if (user_type === "Individual") {
$('.company-fieldset').hide();
if (user_type === "Freelancer") {
$('.freelancer-fieldset').show();
$('.professor-fieldset').hide();
$('.student-fieldset').hide();
}
if (user_type === "Professor") {
$('.freelancer-fieldset').hide();
$('.professor-fieldset').show();
$('.student-fieldset').hide();
}
if (user_type === "Student") {
$('.freelancer-fieldset').dide();
$('.professor-fieldset').hide();
$('.student-fieldset').show();
}
}
})
});
No jQuery required here, a little reformat of your HTML and a small sprinkle of CSS.
EDIT: If you can nest the fieldsets in the same parent (looks like you can)
EDIT: if you really must keep the same HTML then jQuery will be required. NOTE: I still had to provide your radio buttons names to make them mutually exclusive.