Need Help -- Hide Options From Select when Selected --

38
September 14, 2021, at 10:00 PM

I'm having trouble hiding options when some other option is selected in select option: I have my form on default: Select1 on AS400 and Select2 on New Account which shows the inputs the user will fill out.

The problem I'm facing now is a couple of errors:

  1. When the form is loaded Select1 on AS400 and Select2 on New Account which shows the inputs the user will fill out and at the same time select2 option is also showing which shouldn't be showing

  2. if the user selects other options from select2, the select3 option is showing also under select2 options

  3. When the user selects select1 and choose any other option from select3 the option from select1 is showing.

is there any wahy i can fix that so that when user what user selects only shows that

// AS400 New Account/
$("#select1").change(function() {
  if ($(this).val() == "as400") {
    $('#otherFieldDiv').show();
  } else {
    $('#otherFieldDiv').hide();
  }
});
$("#select1").trigger("change");

$("#select2").change(function() {
  if ($(this).val() == "newacc") {
    $('#otherFieldGroupDiv').show();
    $('#otherField1').attr('required', '');
    $('#otherField1').attr('data-error', 'This field is required.');
    $('#otherField2').attr('required', '');
    $('#otherField2').attr('data-error', 'This field is required.');
    $('#otherField3').attr('required', '');
    $('#otherField3').attr('data-error', 'This field is required.');
    $('#otherField4').attr('required', '');
    $('#otherField4').attr('data-error', 'This field is required.');
    $('#otherField5').attr('required', '');
    $('#otherField5').attr('data-error', 'This field is required.');
  } else {
    $('#otherFieldGroupDiv').hide();
    $('#otherField1').removeAttr('required');
    $('#otherField1').removeAttr('data-error');
    $('#otherField2').removeAttr('required');
    $('#otherField2').removeAttr('data-error');
    $('#otherField3').removeAttr('required');
    $('#otherField3').removeAttr('data-error');
    $('#otherField4').removeAttr('required');
    $('#otherField4').removeAttr('data-error');
    $('#otherField5').removeAttr('required');
    $('#otherField5').removeAttr('data-error');
  }
});
$("#select2").trigger("change");

///AS400 Modify Account//
$("#select2").change(function() {
  if ($(this).val() == "mod") {
    $('#otherFieldGroupMod').show();
    $('#otherField1').attr('required', '');
    $('#otherField1').attr('data-error', 'This field is required.');
    $('#otherField2').attr('required', '');
    $('#otherField2').attr('data-error', 'This field is required.');
    $('#otherField3').attr('required', '');
    $('#otherField3').attr('data-error', 'This field is required.');
    $('#otherField4').attr('required', '');
    $('#otherField4').attr('data-error', 'This field is required.');
    $('#otherField5').attr('required', '');
    $('#otherField5').attr('data-error', 'This field is required.');
    $('#otherField6').attr('required', '');
    $('#otherField6').attr('data-error', 'This field is required.');
  } else {
    $('#otherFieldGroupMod').hide();
    $('#otherField1').removeAttr('required');
    $('#otherField1').removeAttr('data-error');
    $('#otherField2').removeAttr('required');
    $('#otherField2').removeAttr('data-error');
    $('#otherField3').removeAttr('required');
    $('#otherField3').removeAttr('data-error');
    $('#otherField4').removeAttr('required');
    $('#otherField4').removeAttr('data-error');
    $('#otherField5').removeAttr('required');
    $('#otherField5').removeAttr('data-error');
    $('#otherField6').removeAttr('required');
    $('#otherField6').removeAttr('data-error');
  }
});
$("#select2").trigger("change");
//AS400 Reset Password Account//
$("#select2").change(function() {
  if ($(this).val() == "reset") {
    $('#otherFieldGroupRes').show();
    $('#otherField1').attr('required', '');
    $('#otherField1').attr('data-error', 'This field is required.');
    $('#otherField2').attr('required', '');
    $('#otherField2').attr('data-error', 'This field is required.');
    $('#otherField3').attr('required', '');
    $('#otherField3').attr('data-error', 'This field is required.');
    $('#otherField6').attr('required', '');
    $('#otherField6').attr('data-error', 'This field is required.');
  } else {
    $('#otherFieldGroupRes').hide();
    $('#otherField1').removeAttr('required');
    $('#otherField1').removeAttr('data-error');
    $('#otherField2').removeAttr('required');
    $('#otherField2').removeAttr('data-error');
    $('#otherField3').removeAttr('required');
    $('#otherField3').removeAttr('data-error');
    $('#otherField6').removeAttr('required');
    $('#otherField6').removeAttr('data-error');
  }
});
$("#select2").trigger("change");
///Windows///
//// Windows New Account/////
$("#select1").change(function() {
  if ($(this).val() == "windows") {
    $('#otherFieldWin').show();
  } else {
    $('#otherFieldWin').hide();
  }
});
$("#select1").trigger("change");
$("#select3").change(function() {
  if ($(this).val() == "windowsacc") {
    $('#windowsAccount').show();
    $('#otherField1').attr('required', '');
    $('#otherField1').attr('data-error', 'This field is required.');
    $('#otherField2').attr('required', '');
    $('#otherField2').attr('data-error', 'This field is required.');
    $('#otherField3').attr('required', '');
    $('#otherField3').attr('data-error', 'This field is required.');
    $('#otherField4').attr('required', '');
    $('#otherField4').attr('data-error', 'This field is required.');
    $('#otherField5').attr('required', '');
    $('#otherField5').attr('data-error', 'This field is required.');
  } else {
    $('#windowsAccount').hide();
    $('#otherField1').removeAttr('required');
    $('#otherField1').removeAttr('data-error');
    $('#otherField2').removeAttr('required');
    $('#otherField2').removeAttr('data-error');
    $('#otherField3').removeAttr('required');
    $('#otherField3').removeAttr('data-error');
    $('#otherField4').removeAttr('required');
    $('#otherField4').removeAttr('data-error');
    $('#otherField5').removeAttr('required');
    $('#otherField5').removeAttr('data-error');
  }
});
$("#select3").trigger("change");
///K Drive and Group Access//
$("#select3").change(function() {
  if ($(this).val() == "kdrive") {
    $('#windowsAccountAccess').show();
    $('#otherField1').attr('required', '');
    $('#otherField1').attr('data-error', 'This field is required.');
    $('#otherField2').attr('required', '');
    $('#otherField2').attr('data-error', 'This field is required.');
    $('#otherField3').attr('required', '');
    $('#otherField3').attr('data-error', 'This field is required.');
    $('#otherField4').attr('required', '');
    $('#otherField4').attr('data-error', 'This field is required.');
    $('#otherField5').attr('required', '');
    $('#otherField5').attr('data-error', 'This field is required.');
  } else {
    $('#windowsAccountAccess').hide();
    $('#otherField1').removeAttr('required');
    $('#otherField1').removeAttr('data-error');
    $('#otherField2').removeAttr('required');
    $('#otherField2').removeAttr('data-error');
    $('#otherField3').removeAttr('required');
    $('#otherField3').removeAttr('data-error');
    $('#otherField4').removeAttr('required');
    $('#otherField4').removeAttr('data-error');
    $('#otherField5').removeAttr('required');
    $('#otherField5').removeAttr('data-error');
  }
});
$("#select3").trigger("change");
<style>html,
body {
  min-height: 100%;
}
body,
div,
form,
input,
label {
  padding: 0;
  margin: 0;
  outline: none;
  font-family: Roboto, Arial, sans-serif;
  font-size: 13px;
  color: #666;
  line-height: 22px;
}
legend {
  color: #fff;
  background-color: #095484;
  padding: 3px 5px;
  font-size: 20px;
}
h1 {
  position: absolute;
  margin: 0;
  font-size: 36px;
  color: #fff;
  z-index: 2;
}
.testbox {
  display: flex;
  justify-content: center;
  align-items: center;
  height: inherit;
  padding: 20px;
}
form {
  width: 75%;
  padding: 20px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 20px 0 #095484;
}
.banner {
  position: relative;
  height: 320px;
  background-image: url("/Krishneel/Walgreens Logo's/Walgreens New Logo/banner.png");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.banner::after {
  content: "";
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
}
input {
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
input {
  width: calc(100% - 10px);
  padding: 5px;
}
select {
  width: 206%;
  padding: 1px 0;
  background: transparent;
}
input[type="date"] {
  padding: 4px 5px;
}
.item:hover p,
.item:hover i,
.question:hover p,
.question label:hover,
input:hover::placeholder {
  color: #095484;
}
.item input:hover {
  border: 1px solid transparent;
  box-shadow: 0 0 6px 0 #095484;
  color: #095484;
}
.item {
  margin: 10px 0;
}
input[type="date"]::-webkit-inner-spin-button {
  display: none;
}
.item i,
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  font-size: 20px;
  color: #095484;
}
.item i {
  right: 2%;
  top: 30px;
  z-index: 1;
}
[type="date"]::-webkit-calendar-picker-indicator {
  right: 1%;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
}
.question span {
  margin-left: 30px;
}
.btn-block {
  margin-top: 10px;
  text-align: center;
}
button {
  width: 150px;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background: #095484;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
}
button:hover {
  background: #4286f4;
}
@media (min-width: 568px) {
  .name-item,
  .city-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .name-item input,
  .city-item input,
  .name-item div {
    width: calc(50% - 20px);
  }
  .name-item div input {
    width: 97%;
  }
  .name-item div label {
    display: block;
    padding-bottom: 5px;
  }
}
.status label:hover input {
  box-shadow: 0 0 5px 0 #095484;
}
.status-item input,
.status-item span {
  width: auto;
  vertical-align: middle;
}
.status-item input {
  margin: 0;
}
.status-item span {
  margin: 0 20px 0 5px;
}
textarea {
  width: calc(100% - 12px);
  padding: 5px;
  font-family: Roboto, Arial, sans-serif;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="testbox">
  <form name="frmContact" id="" frmContact "" method="post" action="" enctype="multipart/form-data"><b></b>
    <form class="p-3">
      <div class="banner">
        <h1>ID Request Form</h1>
      </div>
      <br>
      <p>Please fill out with the information that is requested below and submit the id request form. Thank you!</p>
      <div class="form-group">
        <p>Request Type</p>
        <label for="select1">Choose a Category</label>
        <select class="form-control" id="select1">
          <option value="as400">AS400</option>
          <option value="windows">Windows</option>
          <option value="out">Outlook</option>
          <option value="vap">Valpo</option>
        </select>
      </div>
      <!--AS400 Sub Category-->
      <div class="form-group" id="otherFieldDiv">
        <label for="select2">Choose a Sub-Category</label>
        <select class="form-control" id="select2">
          <option value="newacc">New Acount</option>
          <option value="mod">Modify Account</option>
          <option value="reset">Reset Password</option>
        </select>
      </div>
      <!------------------------------------------------------------------------------------------------------------->
      <!--Windows Sub Category-->
      <div class="form-group" id="otherFieldWin">
        <label for="select3">Choose a Sub-Category</label>
        <select class="form-control" id="select3">
          <option value="windowsacc">New Acount</option>
          <option value="kdrive">K Drive and Group Access</option>
          <option value="dc">DC Net Access</option>
          <option value="pass">Password Reset</option>
        </select>
      </div>
      <hr>
      <!----------------------------------------------------- AS400 Account------------------------------------------->
      <!--AS400 New Account-->
      <div class="form-group" id="otherFieldGroupDiv">
        <p>AS400 New Account</p>
        <div class="row">
          <div class="col-6">
            <label for="otherField1">Requester (Full Name)</label>
            <input type="text" class="form-control w-100" id="otherField1" placeholder="Type Here...">
          </div>
          <br><br>
          <div class="col-6">
            <label for="otherField2">Beneficiary (Full Name)</label>
            <input type="text" class="form-control w-100" id="otherField2" placeholder="Type Here...">
          </div>
          <br><br>
          <div class="col-6">
            <label for="otherField3">Employee ID</label>
            <input type="text" class="form-control w-100" id="otherField3" placeholder="Type Here...">
          </div>
          <br>
          <div class="col-6">
            <label for="otherField4">New Job Category
                        <input list="otherField4" type="text" class="form-control w-100" name="myBrowser" placeholder="*Click in box for Job Category List*"></label>
            <datalist id="otherField4">
                                    <option value="NO CHANGE">NO CHANGE</option>
                                    <option value="ADMCLK = Admin Clerk">ADMCLK = Admin Clerk</option>
                                    <option value="ADMCLK+ = Admin Clerk w/ Manual Book">ADMCLK+ = Admin Clerk w/ Manual Book</option>
                                    <option value="ADMMGR = Admin MGR w/ Manual Book">ADMMGR = Admin MGR w/ Manual Book</option>
                                    <option value="DCM = DC Manager">DCM = DC Manager</option>
                                    <option value="FM IN = Inbound Funtion Manager">FM IN = Inbound Funtion Manager</option>
                                    <option value="FM OUT = Outbound Funtion Manager">FM OUT = Outbound Funtion Manager</option>
                                    <option value="FM LC = Location Control Function Manager">FM LC = Location Control Function Manager</option>
                                    <option value="JOB-CAT-01 = Admn Manager (No Manual Book)">JOB-CAT-01 = Admn Manager (No Manual Book)</option>
                                    <option value="LC + VERIFY = LC w/ Verify Light">LC + VERIFY = LC w/ Verify Light</option>
                                    <option value="LOC CLRK = Location Control Clerk">LOC CLRK = Location Control Clerk</option>
                                    <option value="LP = Asset Protection">LP = Asset Protection</option>
                                    <option value="LP FM = Asset Protection Manager">LP FM = Asset Protection Manager</option>
                                    <option value="MPB-SAIL = MPB and Sail Function">MPB-SAIL = MPB and Sail Function</option>
                                </datalist>
          </div>
          <br>
          <div class="col-6">
            <label for="otherField5">New AS400 ID</label>
            <input type="text" class="form-control w-100" id="otherField5" placeholder="Type Here...">
          </div>
        </div>
      </div>
      <!--Modify AS400 Account-->
      <div class="form-group" id="otherFieldGroupMod">
        <p>AS400 Modify Account</p>
        <div class="row">
          <div class="col-6">
            <label for="otherField1">Requester (Full Name)</label>
            <input type="text" class="form-control w-100" id="otherField1" placeholder="Type Here...">
          </div>
          <br><br>
          <div class="col-6">
            <label for="otherField2">Beneficiary (Full Name)</label>
            <input type="text" class="form-control w-100" id="otherField2" placeholder="Type Here...">
          </div>
          <br><br>
          <div class="col-6">
            <label for="otherField3">Employee ID</label>
            <input type="text" class="form-control w-100" id="otherField3" placeholder="Type Here...">
          </div>
          <br><br>
          <br><br>
          <div class="col-6">
            <label for="otherField6">AS400 ID</label>
            <input type="text" class="form-control w-100" id="otherField6" placeholder="Type Here...">
          </div>
          <br>
          <div class="col-6">
            <label for="otherField4">New Job Category
                        <input list="otherField4" type="text" class="form-control w-100" name="myBrowser" / placeholder="*Click in box for Job Category List*"></label>
            <datalist id="otherField4">
                                    <option value="NO CHANGE">NO CHANGE</option>
                                    <option value="ADMCLK = Admin Clerk">ADMCLK = Admin Clerk</option>
                                    <option value="ADMCLK+ = Admin Clerk w/ Manual Book">ADMCLK+ = Admin Clerk w/ Manual Book</option>
                                    <option value="ADMMGR = Admin MGR w/ Manual Book">ADMMGR = Admin MGR w/ Manual Book</option>
                                    <option value="DCM = DC Manager">DCM = DC Manager</option>
                                    <option value="FM IN = Inbound Funtion Manager">FM IN = Inbound Funtion Manager</option>
                                    <option value="FM OUT = Outbound Funtion Manager">FM OUT = Outbound Funtion Manager</option>
                                    <option value="FM LC = Location Control Function Manager">FM LC = Location Control Function Manager</option>
                                    <option value="JOB-CAT-01 = Admn Manager (No Manual Book)">JOB-CAT-01 = Admn Manager (No Manual Book)</option>
                                    <option value="LC + VERIFY = LC w/ Verify Light">LC + VERIFY = LC w/ Verify Light</option>
                                    <option value="LOC CLRK = Location Control Clerk">LOC CLRK = Location Control Clerk</option>
                                    <option value="LP = Asset Protection">LP = Asset Protection</option>
                                    <option value="LP FM = Asset Protection Manager">LP FM = Asset Protection Manager</option>
                                    <option value="MPB-SAIL = MPB and Sail Function">MPB-SAIL = MPB and Sail Function</option>
               </datalist>
          </div>
          <br>
          <div class="col-6">
            <label for="otherField5">New AS400 ID</label>
            <input type="text" class="form-control w-100" id="otherField5" placeholder="Type Here...">
          </div>
        </div>
      </div>
      <!--Reinstate AS400 Account-->
      <div class="form-group" id="otherFieldGroupRes">
        <p>AS400 Reinstate Password</p>
        <div class="row">
          <div class="col-6">
            <label for="otherField1">Requester (Full Name)</label>
            <input type="text" class="form-control w-100" id="otherField1" placeholder="Type Here...">
          </div>
          <br><br>
          <div class="col-6">
            <label for="otherField2">Beneficiary (Full Name)</label>
            <input type="text" class="form-control w-100" id="otherField2" placeholder="Type Here...">
          </div>
          <br><br>
          <div class="col-6">
            <label for="otherField3">Employee ID</label>
            <input type="text" class="form-control w-100" id="otherField3" placeholder="Type Here...">
          </div>
          <br><br>
          <br><br>
          <div class="col-6">
            <label for="otherField6">AS400 ID</label>
            <input type="text" class="form-control w-100" id="otherField6" placeholder="Type Here...">
          </div>
        </div>
      </div>
      <!------------------------------------------------------------------------------------------------------------------------------------->
      <!----------------------------------------------------Windows Account------------------------------------------------------------------>
      <!--Windows New Account-->
      <div class="form-group" id="windowsAccount">
        <p>Windows New Account</p>
        <div class="row">
          <div class="col-6">
            <label for="otherField1">Full Name</label>
            <input type="text" class="form-control w-100" id="otherField1" placeholder="Type Here...">
          </div>
          <br><br>
          <div class="col-6">
            <label for="otherField3">Employee ID</label>
            <input type="text" class="form-control w-100" id="otherField3" placeholder="Type Here...">
          </div>
          <br><br>
          <div class="col-6">
            <label for="otherField7">ONE ID (Formally Authenticator ID)</label>
            <input type="text" class="form-control w-100" id="otherField7" placeholder="Type Here...">
          </div>
          <br><br>
          <div class="col-6">
            <label for="otherField8"> Mirror Account ONE ID</label>
            <input type="text" class="form-control w-100" id="otherField8" placeholder="Type Here...">
          </div>
          <br><br>
          <div class="col-6">
            <label for="otherField9">Comments</label>
            <input type="text" class="form-control w-100" id="otherField9" placeholder="Type Here...">
          </div>
        </div>
      </div>
      <!--K Drive and Group Access-->
      <div class="form-group" id="windowsAccountAccess">
        <p>K Drive and Group Access</p>
        <div class="row">
          <div class="col-6">
            <label for="otherField1">Full Name</label>
            <input type="text" class="form-control w-100" id="otherField1" placeholder="Type Here...">
          </div>
          <br><br>
          <div class="col-6">
            <label for="otherField3">Employee ID</label>
            <input type="text" class="form-control w-100" id="otherField3" placeholder="Type Here...">
          </div>
          <br><br>
          <div class="col-6">
            <label for="otherField7">ONE ID (Formally Authenticator ID)</label>
            <input type="text" class="form-control w-100" id="otherField7" placeholder="Type Here...">
          </div>
          <br><br>
          <div class="col-6">
            <label for="otherField8"> Mirror Account ONE ID</label>
            <input type="text" class="form-control w-100" id="otherField8" placeholder="Type Here...">
          </div>
          <br><br>
          <div class="col-6">
            <label for="otherField9">Comments</label>
            <input type="text" class="form-control w-100" id="otherField9" placeholder="Type Here...">
          </div>
        </div>
      </div>
      <input type="submit" name="send" class="btn-submit" value="Send" />
      <div id="statusMessage">
        <?php
                                if (! empty($message)) {
                                    ?>
          <p class='<?php echo $type; ?>Message'>
            <?php echo $message; ?>
          </p>
          <?php
                                }
                                ?>
      </div>
    </form>
  </form>
</div>

READ ALSO
Error in svm fit model with array of array data

Error in svm fit model with array of array data

I'm messing with an earthquake post-FFT datasetI'm trying to do classification with these data and I'm facing an error in model fitting which said ValueError: setting an array element with a sequence

56
How do you have PHP code on standby (idle)? [closed]

How do you have PHP code on standby (idle)? [closed]

Want to improve this question? Add details and clarify the problem by editing this post

33
React changing state of specific element on button click

React changing state of specific element on button click

I'm building a React component thats basically a dropdown of sorting optionsWhen a user clicks on a sort selection, the UI will update in accordance to the user's selection

15