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');
})

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

});

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