I have made a request form for my group to make it easier for them to request for help desk. At the moment I have two dropdowns – I have the main request dropdown when the user selects from the first dropdown selection it goes to the second dropdown selection for the user to select. I want to add the third dropdown so when the user selects from the second dropdown it opens more selection in the third dropdown based on what category the user has selected for the Second dropdown.
Also since all of us no the Internet Explorer is going to get decommission so i have web pages that run on IE, but i want them to force open them in Edge, i have written the code that works but it opens the Edge and the IE pages but i want to keep only the Edge webpage and close the IE page
The Edge code is very top on the page
$(function() {
// on page load wrap all select-2 options in span so they cannot be selected without specifying select-1
$('#select-2 option:not([selected])').wrap('<span/>');
});
// when select-1 is changed, hide all options that do not have the class corresponding to the value of select-1
$('#select-1').change(function() {
$('#select-2 span > option').unwrap();
console.log($('#select-1'));
$('#select-2 option:not(.' + $('#select-1').val() + ', [selected])').wrap('<span/>');
//console.log($('#select-2').val());
});
$('#select-2').trigger('change');
$(document).ready(function() {
$("#otherFieldGroupMod").hide();
$("#otherFieldGroupRes").hide();
$("#otherFieldGroupRem").hide();
$("#otherFieldGroupOutacc").hide();
$("#outlookAccountDistri").hide();
$("#otherFieldGroupWinacc").hide();
$("#otherFieldGroupKdrive").hide();
$("#otherFieldGroupDcnet").hide();
$("#otherFieldGroupResPass").hide();
$("#otherFieldGroupValpo").hide()
});
//AS400 NEW ACCOUNT SCRIPT//
$(function() {
$("#select-2").change(function() {
if ($(this).val() == "AS400 New Account") { //AS400 New Account //
$("#otherFieldGroupNewacc").show();
$('#otherFieldGroupNewacc').attr('required','');
} else {
$("#otherFieldGroupNewacc").hide();
$('#otherFieldGroupNewacc').removeAttr('required');
}
if ($(this).val() == "Modify Account") { //AS400 Modify Account //
$("#otherFieldGroupMod").show();
} else {
$("#otherFieldGroupMod").hide();
}
if ($(this).val() == "Reset Password") { //AS400 Reinstate Account //
$("#otherFieldGroupRes").show();
} else {
$("#otherFieldGroupRes").hide();
}
if ($(this).val() == "Remove Password") { //AS400 Remove Account //
$("#otherFieldGroupRem").show();
} else {
$("#otherFieldGroupRem").hide();
}
if ($(this).val() == "Outlook New Account") { //Outlook New Account//
$("#otherFieldGroupOutacc").show();
} else {
$("#otherFieldGroupOutacc").hide();
}
if ($(this).val() == "Add to Distribution List") { //Outlook Add to Distribution List//
$("#outlookAccountDistri").show();
} else {
$("#outlookAccountDistri").hide();
}
if ($(this).val() == "Windows New Account") { //Windows New Account//
$("#otherFieldGroupWinacc").show();
} else {
$("#otherFieldGroupWinacc").hide();
}
if ($(this).val() == "K Drive and Group Access") { //Windows K Drive and Group Access//
$("#otherFieldGroupKdrive").show();
} else {
$("#otherFieldGroupKdrive").hide();
}
if ($(this).val() == "DC Net") { //Windows DC Net Access//
$("#otherFieldGroupDcnet").show();
} else {
$("#otherFieldGroupDcnet").hide();
}
if ($(this).val() == "Password Reset") { //Windows Reset Password//
$("#otherFieldGroupResPass").show()
&& $("#userEmail").hide()
&& $(".btn-submit").hide();
} else {
$("#otherFieldGroupResPass").hide()
&& $("#userEmail").show()
&& $(".btn-submit").show();
}
if ($(this).val() == "Valpo New Account") { //New Valpo Access//
$("#otherFieldGroupValpo").show();
} else {
$("#otherFieldGroupValpo").hide();
}
});
});
$(function() {
// on page load wrap all select-2 options in span so they cannot be selected without specifying select-1
$('#select-4 option:not([selected])').wrap('<span/>');
});
// when select-1 is changed, hide all options that do not have the class corresponding to the value of select-1
$('#select-3').change(function() {
$('#select-4 span > option').unwrap();
$('#select-4 option:not(.' + $('#select-3').val() + ', [selected])').wrap('<span/>');
//console.log($('#select-2').val());
});
$('#select-4').trigger('change');
<script>
if(/MSIE d|Trident.*rv:/.test(navigator.userAgent)) {
window.location = 'microsoft-edge:' + 'http://www.walmart.com';
setTimeout(function() {
//window.location = 'https://go.microsoft.com';
}, 1);
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>ID Request Form</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="contact-view.css" rel="stylesheet">
</head>
<body>
<div class="testbox">
<form name="frmContact" id="frmContact" method="post" action="" enctype="multipart/form-data" 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">
<label>Request Type</label>
<select id="select-1" name="select-1" class="form-control w-100" required>
<option selected value="">--Select an option--</option>
<option value="AS400">AS400</option> <!-- "option-1" -->
<option value="Outlook">Outlook</option> <!-- "option-2" -->
<option value="Windows">Windows</option> <!-- "option-3" -->
<option value="Valpo">Valpo</option> <!-- "option-4" -->
</select>
<br/>
<label>Choose a Sub-Category</label>
<select id="select-2" name="select-2" class="form-control w-100" required>
<option selected value="">--Select an option--</option>
<option value="AS400 New Account" class="AS400">AS400 New Account</option> <!-- "option-1a" -->
<option value="Modify Account" class="AS400">Modify Account</option> <!-- "option-1b" -->
<option value="Reset Password" class="AS400">Reset Password</option> <!-- "option-1c" -->
<option value="Remove Password" class="AS400">Remove Account</option> <!-- "option-1d" -->
<option value="Outlook New Account" class="Outlook">Outlook New Account</option> <!-- "option-2a" -->
<option value="Add to Distribution List" class="Outlook">Add to Distribution List</option> <!-- "option-2b" -->
<option value="Windows New Account" class="Windows">Windows New Account</option> <!-- "option-3a" -->
<option value="K Drive and Group Access" class="Windows">K Drive and Group Access</option> <!-- "option-3b" -->
<option value="DC Net" class="Windows">DC Net</option> <!-- "option-3c" -->
<option value="Password Reset" class="Windows">Password Reset</option> <!-- "option-3d" -->
<option value="Valpo New Account" class="Valpo">Valpo New Account</option> <!-- "option-4a" -->
</select>
</div>
<hr>
>
<!--AS400 New Account-->
<div class="form-group" id="otherFieldGroupNewacc">
<h2>AS400 New Account</h2><hr>
<div class="row">
<div class="col-6">
<label for="userRequestor">Full Name</label>
<input type="text" class="form-control w-100" id="userRequestor" name="userRequestor" placeholder="Type Here..." value="<?php if(isset($_SESSION['data']['Requestor Name'])) echo $_SESSION['data']['Requestor Name']; ?>">
</div>
<br><br>
<div class="col-6">
<label for="userTM">Beneficiary (Full Name)</label>
<input type="text" class="form-control w-100" id="userTM" name="userTM"placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userEmployee">Employee ID</label>
<input type="text" class="form-control w-100" id="userEmployee" name="userEmployee" placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label for="selectJob">New Job Category</label>
<select id="selectJob" name="selectJob" class="form-control w-100" placeholder="*Click in box for Job Category List*">
<option disabled selected value="">Select an option</option>
<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>
</select>
</div>
<br>
<div class="col-6">
<label for="userNewAS400">New AS400 ID</label>
<input type="text" class="form-control w-100" id="userNewAS400" name="userNewAS400" placeholder="Type Here...">
</div>
</div>
</div>
<!--Modify AS400 Account-->
<div class="form-group" id="otherFieldGroupMod">
<h2>AS400 Modify Account</h2><hr>
<div class="row">
<div class="col-6">
<label for="userRequestorMod">Requester (Full Name)</label>
<input type="text" class="form-control w-100" id="userRequestorMod" name="userRequestorMod"placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userTMMod">Beneficiary (Full Name)</label>
<input type="text" class="form-control w-100" id="userTMMod" name="userTMMod" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userEmployeeMod">Employee ID</label>
<input type="text" class="form-control w-100" id="userEmployeeMod" name="userEmployeeMod" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userAS400Mod">AS400 ID</label>
<input type="text" class="form-control w-100" id="userAS400Mod" name="userAS400Mod" placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label for="selectJobsMod">New Job Category</label>
<select id="selectJobsMod" name="selectJobsMod" class="form-control w-100" placeholder="*Click in box for Job Category List*">
<option disabled selected value="">Select an option</option>
<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>
</select>
</div>
<br>
<div class="col-6">
<label for="userNewAS400Mod">New AS400 ID <strong>***Leave Blank If No Change***</strong></label>
<input type="text" class="form-control w-100" id="userNewAS400Mod" name="userNewAS400Mod" placeholder="Type Here...">
</div>
</div>
</div>
<!--Reinstate AS400 Account-->
<div class="form-group" id="otherFieldGroupRes">
<h2>AS400 Reinstate Password</h2><hr>
<div class="row">
<div class="col-6">
<label for="userRequestorRe">Requester (Full Name)</label>
<input type="text" class="form-control w-100" id="userRequestorRe" name="userRequestorRe"placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userTMRe">Beneficiary (Full Name)</label>
<input type="text" class="form-control w-100" id="userTMRe" name="userTMRe" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userEmployeeRe">Employee ID</label>
<input type="text" class="form-control w-100" id="userEmployeeRe" name="userEmployeeRe" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userAS400Re">AS400 ID</label>
<input type="text" class="form-control w-100" id="userAS400Re" name="userAS400Re" placeholder="Type Here...">
</div>
</div>
</div>
<!--Remove AS400 Account-->
<div class="form-group" id="otherFieldGroupRem">
<h2>AS400 Remove Account</h2><hr>
<div class="row">
<div class="col-6">
<label for="userRequestorRes">Requester (Full Name)</label>
<input type="text" class="form-control w-100" id="userRequestorRes" name="userRequestorRes"placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label for="userTMRes">Terminated TM (Full Name)</label>
<input type="text" class="form-control w-100" id="userTMRes" name="userTMRes" placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label for="userEmployeeRes">Employee ID</label>
<input type="text" class="form-control w-100" id="userEmployeeRes" name="userEmployeeRes" placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label for="userAS400Res">AS400 ID</label>
<input type="text" class="form-control w-100" id="userAS400Res" name="userAS400Res" placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label for="hideInputRes">Reason</label>
<input type="text" class="form-control w-100" id="hideInputRes" name="hideInputRes" title="Example: Fired, Retired, Leave of Absence, etc..." placeholder="Type Here...">
</div>
</div>
</div>
<!--New Account-->
<div class="form-group" id="otherFieldGroupOutacc">
<h2>Outlook New Account</h2><hr>
<div class="row">
<div class="col-6">
<label for="userReqNewOutlook">Full Name</label>
<input type="text" class="form-control w-100" id="userReqNewOutlook" name="userReqNewOutlook" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userEmpNewOutlook">Employee ID</label>
<input type="text" class="form-control w-100" id="userEmpNewOutlook" name="userEmpNewOutlook" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="oneIDNewOutlook">ONE ID (Formally Authenticator ID)</label>
<input type="text" class="form-control w-100" id="oneIDNewOutlook" name="oneIDNewOutlook" placeholder="Type Here...">
</div>
<br><br>
</div>
</div>
<!--Add to Distribution List-->
<div class="form-group" id="outlookAccountDistri">
<h2>Add to Distribution List</h2><hr>
<div class="row">
<div class="col-6">
<label for="userReqOutlookDist">Full Name</label>
<input type="text" class="form-control w-100" id="userReqOutlookDist" name="userReqOutlookDist" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="oneIDOutlookDist">ONE ID (Formally Authenticator ID)</label>
<input type="text" class="form-control w-100" id="oneIDOutlookDist" name="oneIDOutlookDist" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="select-5">Select a Distribution List</label>
<select id="select-5" name="select-5" class="form-control w-100" placeholder="*Click in box for Distribution List*">
<option disabled selected value="">Choose a Distribution List</option>
<option value="WoodlandDInsuffAitems">WoodlandDInsuffAitems</option>
</select>
</div>
</div>
</div>
<!--Windows New Account-->
<div class="form-group" id="otherFieldGroupWinacc">
<h2>Windows New Account</h2><hr>
<div class="row">
<div class="col-6">
<label for="userReqWinAcnt">Full Name</label>
<input type="text" class="form-control w-100" id="userReqWinAcnt" name="userReqWinAcnt" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userEmpWinAcnt">Employee ID</label>
<input type="text" class="form-control w-100" id="userEmpWinAcnt" name="userEmpWinAcnt" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="oneIDWinAcnt">ONE ID (Formally Authenticator ID)</label>
<input type="text" class="form-control w-100" id="oneIDWinAcnt" name="oneIDWinAcnt" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userMirror"> Mirror Account ONE ID</label>
<input type="text" class="form-control w-100" id="userMirror" name="userMirror" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userComment">Comments</label>
<input type="text" class="form-control w-100" id="userComment" name="userComment" placeholder="Type Here...">
</div>
</div>
</div>
<!--K Drive and Group Access-->
<div class="form-group" id="otherFieldGroupKdrive">
<h2>K Drive and Group Access</h2><hr>
<div class="row">
<div class="col-6">
<label for="userReqDrive">Full Name</label>
<input type="text" class="form-control w-100" id="userReqDrive" name="userReqDrive" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userEmpDrive">Employee ID</label>
<input type="text" class="form-control w-100" id="userEmpDrive" name="userEmpDrive" placeholder="Type Here...">
</div>
</div>
</div>
<!--DC Net Access-->
<div class="form-group" id="otherFieldGroupDcnet">
<h2>DC Net Access</h2><hr>
<div class="row">
<div class="col-6">
<label for="userReqDCNET">Full Name</label>
<input type="text" class="form-control w-100" id="userReqDCNET " name="userReqDCNET" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userEmpDCNET">Employee ID</label>
<input type="text" class="form-control w-100" id="userEmpDCNET" name="userEmpDCNET" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="oneIDDCNET">ONE ID (Formally Authenticator ID)</label>
<input type="text" class="form-control w-100" id="oneIDDCNET" name="oneIDDCNET" placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label>Select your Job Title</label>
<select id="select-3" name="select-3" class="form-control w-100">
<option selected value="">Select an option</option>
<option value="TM">TM</option>
<option value="DCS">DCS</option>
</select>
<br>
<label>Select your Department & Shift</label>
<select id="select-4" name="select-4" class="form-control w-100">
<option selected value="">Select an option</option>
<option value="Cost Recovery" class="TM">Cost Recovery</option>
<option value="Lean Captain" class="TM">Lean Captain</option>
</select>
</div>
</div>
</div>
<!--Password Access-->
<div class="form-group" id="otherFieldGroupResPass">
<h2>Reset Windows Password</h2><hr>
<div class="col-6">
<label for="otherField11">Click the link for Reset Password Help</label>
<a href="http://wddc.walgreens.com/Forms/Password Resets & Account Unlocks for Direct Reports.pdf">Password Resets & Account Unlocks for Direct Reports</a>
</div>
</div>
<!---VALPO Account->
<!--New Account-->
<div class="form-group" id="otherFieldGroupValpo">
<h2>Valpo New Account</h2><hr>
<div class="row">
<div class="col-6">
<label for="userReqValpo">Full Name</label>
<input type="text" class="form-control w-100" id="userReqValpo" name="userReqValpo" placeholder="Type Here...">
</div>
<br><br>
</div>
</div>
<!--Sending Email-->
<div class="form-group" id="userEmail">
<div class="row">
<div class="col-6">
<label for="userEmail">Enter your Email</label>
<input type="text" class="form-control w-100" name="userEmail" placeholder="Type Here..." pattern="[email protected]" value="<?php if(isset($_SESSION['data']["Requestor's Email"])) echo $_SESSION['data']["Requestor's Email"]; ?>">
</div>
</div>
</div>
<div class="form-group" id="message">
<?php display_message(); ?>
</div>
<input type="submit" name="send" class="btn-submit" value="Send" />
</form>
</div>
<script src="hide-show-fields-form.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</body>
</html>