Bootstrap Conditional Form
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form id="live_form">
<div class="form-group">
<label class="control-label ">
What is most important to you?
</label>
<div class="">
<div class="radio">
<label class="radio">
<input name="rating" type="radio" value="Grip"/>
Grip Strength
</label>
</div>
<div class="radio">
<label class="radio">
<input name="rating" type="radio" value="Scar"/>
Scar
</label>
</div>
<div class="radio">
<label class="radio">
<input name="rating" type="radio" value="Time"/>
Timely Return to Function
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label ">
What is second most important to you?
</label>
<div class="">
<div class="radio">
<label class="radio">
<input name="rating" type="radio" value="Grip2"/>
Grip Strength
</label>
</div>
<div class="radio">
<label class="radio">
<input name="rating" type="radio" value="Scar2"/>
Scar
</label>
</div>
<div class="radio">
<label class="radio">
<input name="rating" type="radio" value="Time2"/>
Timely Return to Function
</label>
</div>
</div>
</div>
<div class="form-group hidden">
<label class="control-label" for="feedback_surgery">
We think surgery would be the best option for you!
</label>
</div>
<div class="form-group hidden">
<label class="control-label" for="feedback_cast">
We think non-operative treatment with a cast would be best for you!
</label>
</div>
<div class="form-group">
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</form>
JavaScript
$( document ).ready(function() { //wait until body loads
var testimonial_ok=false; //keeps track of whether the testimonial box is filled out
//Inputs that determine what fields to show
var rating = $('#live_form input:radio[name=rating]');
//Wrappers for all fields
var surg = $('#live_form textarea[name="feedback_surgery"]').parent();
var cast = $('#live_form textarea[name="feedback_cast"]').parent();
rating.change(function(){ //when the rating changes
var value=this.value;
all.addClass('hidden'); //hide everything and reveal as needed
if (value == 'Grip' || value == 'Time'){
surgery.removeClass('hidden'); //show feedback_bad
}
else if (value == 'Scar'){
cast.removeClass('hidden'); //show feedback_ok
}
});
});