I have a form where I am trying to show and hide different input fields based on a user selection from a dropdown menu. I have it working in that when an option is selected, it shows the desired form, but hides everything around the form as well. If I set it to not hide anything and only show, it displays one form after the other.
What I am trying to do is set it so that when a user makes a selection, it displays the relevant forms without hiding anything extra, and if a user selects a new form, the new form is displayed and the old one hidden, all without hiding the pre-existing elements that are there from the beginning.
HTML
<section id="quote">
<div id="quote_form" class="container border border-dark" style="border-radius:10px">
<h2 class="text-center">Get a Quote!</h2>
<form class="text-center">
<div>
<select class=" form-control-lg col-md-4 col-md-offset-4" id="building-type">
<option selected disabled hidden>Please select building type</option>
<option value="residential">Residential</option>
<option value="commercial">Commercial</option>
<option value="corporate">Corporate</option>
<option value="hybrid">Hybrid</option>
</select>
</div>
<br>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="tier_selection" id="standard" checked>
<label class="form-check-label" for="standard">Standard ($7,565/shaft)</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="tier_selection" id="premium">
<label class="form-check-label" for="premium">Premium ($12,345/shaft)</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="tier_selection" id="excelium">
<label class="form-check-label" for="excelium">Excelium ($15,400/shaft)</label>
</div>
</form>
<!--RESIDENTIAL INPUTS-->
<form name="residential" id="residential" class="text-center" style="display:none">
<h4 class="text-center">Please enter the following information:</h4>
<div id="residential_input">
<div id="number-of-apartments" class="form-group form-field residential">
<label for="apartment_number">Number of apartments:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="apartment_number">
</div>
<div id="number-of-floors" class="form-group form-field residential">
<label for="floor_number">Number of floors:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="floor_number">
</div>
<div id="number-of-basements" class="form-group form-field residential">
<label for="basement_number">Number of basements:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="basement_number">
</div>
</div>
</form>
<!--/RESIDENTIAL INPUTS-->
<!--COMMERCIAL INPUTS-->
<form name="commercial" id="commercial" class="text-center" style="display:none">
<h4 class="text-center">Please enter the following information:</h4>
<div id="commercial_input">
<div id="number-of-companies" class="form-group form-field commercial">
<label for="business_number">Number of distinct businesses:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="business_number">
</div>
<div id="number-of-floors" class="form-group form-field commercial">
<label for="floor_number">Number of floors:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="floor_number">
</div>
<div id="number-of-basements" class="form-group form-field commercial">
<label for="basement_number">Number of basements:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="basement_number">
</div>
<div id="number-of-parking-spots" class="form-group form-field commercial">
<label for="parking_spaces">Number of parking spaces:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="parking_spaces">
</div>
<div id="number-of-elevators" class="form-group form-field commercial">
<label for="elevator_cages">Number of elevator cages to be deployed:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="elevator_cages">
</div>
</div>
</form>
<!--/COMMERCIAL INPUTS-->
<!--CORPORATE INPUTS-->
<form name="corporate" id="corporate" class="text-center" style="display:none">
<h4 class="text-center">Please enter the following information:</h4>
<div id="corporate_input">
<div id="number-of-corporations" class="form-group form-field corporate">
<label for="companies">Number of separate tenant companies:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="companies">
</div>
<div id="number-of-floors" class="form-group form-field corporate">
<label for="floor_number">Number of floors:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="floor_number">
</div>
<div id="number-of-basements" class="form-group form-field corporate">
<label for="basement_number">Number of basements:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="basement_number">
</div>
<div id="number-of-parking-spots" class="form-group form-field corporate">
<label for="parking_spaces">Number of parking spaces:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="parking_spaces">
</div>
<div id="maximum-occupancy" class="form-group form-field corporate">
<label for="people_floor">Maximum number of people per floor:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="people_floor">
</div>
</div>
</form>
<!--/CORPORATE INPUTS-->
<!--HYBRID INPUTS-->
<form name="hybrid" id="hybrid" class="text-center" style="display:none">
<h4 class="text-center">Please enter the following information:</h4>
<div id="hybrid-input">
<div id="number-of-companies" class="form-group form-field hybrid">
<label for="business_number">Number of distinct businesses:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="business_number">
</div>
<div id="number-of-floors" class="form-group form-field hybrid">
<label for="floor_number">Number of floors:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="floor_number">
</div>
<div id="number-of-basements" class="form-group form-field hybrid">
<label for="basement_number">Number of basements:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="basement_number">
</div>
<div id="number-of-parking-spots" class="form-group form-field hybrid">
<label for="parking_spaces">Number of parking spaces:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="parking_spaces">
</div>
<div id="maximum-occupancy" class="form-group form-field hybrid">
<label for="people_floor">Maximum number of people per floor:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="people_floor">
</div>
<div id="business-hours" class="form-group form-field hybrid">
<label for="active_hours">Building active hours per day:</label>
<select class="col-sm-2 col-md-offset-6" id="active_hours">
<option selected id="0" value="0">0</option>
<option id="1" value="1">1</option>
<option id="2" value="2">2</option>
<option id="3" value="3">3</option>
<option id="4" value="4">4</option>
<option id="5" value="5">5</option>
<option id="6" value="6">6</option>
<option id="7" value="7">7</option>
<option id="8" value="8">8</option>
<option id="9" value="9">9</option>
<option id="10" value="10">10</option>
<option id="11" value="11">11</option>
<option id="12" value="12">12</option>
<option id="13" value="13">13</option>
<option id="14" value="14">14</option>
<option id="15" value="15">15</option>
<option id="16" value="16">16</option>
<option id="17" value="17">17</option>
<option id="18" value="18">18</option>
<option id="19" value="19">19</option>
<option id="20" value="20">20</option>
<option id="21" value="21">21</option>
<option id="22" value="22">22</option>
<option id="23" value="23">23</option>
<option id="24" value="24">24</option>
</select>
</div>
</div>
</form>
<!--/HYBRID INPUTS-->
<!--QUOTE OUTPUTS-->
<div id="quote_output">
<h2 class="text-center">Your instant quote:</h2>
<form class="text-center">
<div id="quote_output_fields">
<div class="form-group">
<label for="elevator_number">Number of elevators:</label>
<input type="text" readonly class="col-sm-2 col-md-offset-6 plaintext" id="elevator_number">
</div>
<div class="form-group">
<label for="quote_total">Installation Quote:</label>
<input type="text" readonly class="col-sm-2 col-md-offset-6 plaintext" id="quote_total">
</div>
</div>
</form>
</div>
<!--/QUOTE OUTPUTS-->
</div>
</section>
jQuery that hides everything except selection
$("#building-type").on("change", function() {
$("#" + $(this).val()).show().siblings().hide();
})
jQuery that only shows, no hiding
$("#building-type").on("change", function() {
$("#" + $(this).val()).show();
})
jQuery that I think will hide the old selection, I am just not sure what to put in place of "this"
$("#building-type").on("change", function() {
$("#" + $(this).val()).show();
$("#" + $(this).val()).hide();
})
Thanks for any help, if you need any other information I will try to provide it as soon as I can.
Try adding a sub-form class on evey form that should hide/show...
Then this change handler on the select should work:
$("#building-type").on("change", function() {
console.log("change",$(this).val())
$(".sub-form").hide()
$("#" + $(this).val()).show();
});