JQuery/Javascript Method To Show/hide Multiple Fields Upon Selection With Common Fields To Multiple Selections

I have a form with multiple fields, some of which only show when a certain selection is made, that is easy enough to do but where I am struggling is when I have common fields which

Solution 1:

This is a pseudo code that might help you. So assign a common class to each of your div. I have assigned plates-option as a common class.

Now, each of this div should also have a class name, same as the option values (check the HTML). Once, you do this things, it becomes easier to show/hide the div's based on the value selected from the drop-down.

$('#order_type').change(function() {
  $("div.plates-options").hide();
  $("div." + $(this).val()).show();
});

$(document).ready(function() {
  $('#order_type').trigger('change');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group row">
  <label for="order_type" class="col-3 col-form-label">What would you like us to provide?</label>
  <div class="col-9">
    <select class="form-control" id="order_type" required>
<option value="0">Please select...</option>
<option value="plates_stepped">Direct - Plates (I have stepped)</option>
<option value="plates_not_stepped">Direct - Plates (Step for me)</option>
<option value="plates_remake">Direct - Plates Remake</option>
<option value="proof_only">Proof Only</option>
<option value="acme_traditional">Acme Traditional</option>
</select>
  </div>
</div>
<div class="form-group plates-options row plates_stepped common_plates">
  plates_stepped & common plates
</div>
<div class="form-group plates-options row plates_not_stepped common_plates">
  plates_not_stepped & common plates
</div>
<div class="form-group plates-options row plates_remake">
  plates_remake
</div>
<div class="form-group plates-options row proof_only">
  proof_only
</div>
<div class="form-group plates-options row acme_traditional common_plates">
  acme_traditional & common plates
</div>

Solution 2:

Below code can help you and need to change condition as per requirement:

$('#order_type').change(function() {
  if ($(this).val() == "plates_stepped") {
    $(".not_stepped").val(0);
    $(".not_stepped").hide("slow");
    $(".common_plates").hide("slow");
    $(".stepped").show("slow");
  } else if ($(this).val() === "plates_not_stepped") {
    $("#plate_qty").val(0);
    $("#plate_thickness").val(0);
    $("#plate_wrong_reading").val(0);
    $("#plate_right_reading").val(0);
    $(".stepped").hide("slow");
    $(".not_stepped").show("slow");
    $(".common_plates").show("slow");
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group row">
  <label for="order_type" class="col-3 col-form-label">What would you like us to provide?</label>
  <div class="col-9">
    <select class="form-control" id="order_type" required>
                            <option value="0">Please select...</option>
                            <option value="plates_stepped">Direct - Plates (I have stepped)</option>
                            <option value="plates_not_stepped">Direct - Plates (Step for me)</option>
                            <option value="plates_remake">Direct - Plates Remake</option>
                            <option value="proof_only">Proof Only</option>
                            <option value="acme_traditional">Acme Traditional</option>
                        </select>
  </div>
</div>
<div class="form-group row stepped common_plates" style="display: none;">
  <label for="plate_qty" class="col-3 col-form-label">Total Plates To Make</label>
  <div class="col-9">
    <input class="form-control" type="number" placeholder="4" id="plate_qty" required>
  </div>
</div>
<div class="row form-group radio-field is-required stepped common_plates" style="display: none;">
  <label class="col-3 col-form-label">Plates Thickness?</label>
  <div class="radio custom-radio form-check-inline col-9">
    <input checked="checked" name="plate_thickness" value="1" type="radio" id="45th">
    <label for="45th">1.14mm - 45th.</label>
    <input name="plate_thickness" value="2" type="radio" id="67th">
    <label for="67th">1.70mm - 67th.</label>
  </div>
</div>
<div class="row form-group radio-field is-required stepped common_plates" style="display: none;">
  <label class="col-3 col-form-label">Mirror Plates?</label>
  <div class="radio custom-radio form-check-inline col-9">
    <input checked="checked" name="plate_reading" value="1" type="radio" id="plate_right_reading">
    <label for="plate_right_reading">Right reading</label>
    <input name="plate_reading" value="2" type="radio" id="plate_wrong_reading">
    <label for="plate_wrong_reading">Wrong Reading</label>
  </div>
</div>
<div class="form-group row not_stepped" style="display: none;">
  <label for="teeth_qty" class="col-3 col-form-label">Teeth quantity</label>
  <div class="col-9">
    <input class="form-control" type="number" placeholder="92" id="teeth_qty" required>
  </div>
</div>
<div class="row form-group radio-field is-required not_stepped" style="display: none;">
  <label class="col-3 col-form-label">Gear Type</label>
  <div class="radio custom-radio form-check-inline col-9">
    <input checked="checked" name="gear_type" value="1" type="radio" id="1_8cp">
    <label for="1_8cp">1/8CP</label>
    <input name="gear_type" value="2" type="radio" id="31dp">
    <label for="31dp">32 DP</label>
  </div>
</div>