We Keep Coding

Add Third Select Drop Down and Auto Populate Based on Selection

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.
How can i add third select option and then show the input for the selection
$(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() {
$("#otherFieldGroupNewacc").hide();
$("#otherFieldGroupMod").hide();
$("#otherFieldGroupRes").hide();
$("#otherFieldGroupRem").hide()
});
//----------------------------------Second Dropdown----------------------------------------------//
$(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();
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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="EETV">EETV</option>
<!-- "option-2" -->
<option value="Outlook">Outlook</option>
<!-- "option-3" -->
<option value="Windows">Windows</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">New Account</option>
<!-- "option-1a" -->
<option value="Modify Account" class="EETV">Modify Account</option>
<!-- "option-1b" -->
<option value="Reset Password" class="Outlook">Reset Password</option>
<!-- "option-1c" -->
<option value="Remove Password" class="Windows">Remove Account</option>
<!-- "option-1d" -->
</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...">
</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>
<option value="DCM = DC Manager">DCM = DC Manager</option>
<option value="FM IN = Inbound Funtion Manager">FM IN = Inbound Funtion Manager</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>

button did not disable correctly angular js javascript

I need to disable my reset button if form field empty. I am trying to do it using below code. Please check this sample
<div class="col-sm-3">
<select class="form-control" ng-model="SelectedYear"
ng-options="label for label in Years" ng-
change="UpdateNumberOfDays()">
<option value="">--Year--</option>
</select>
</div>
<div class="col-sm-3">
<select class="year-text form-control" ng-model="SelectedMonth"
ng-disabled="!SelectedYear" ng-options="label for label in Months"
ng-change="UpdateNumberOfDays()">
<option value="">--Month--</option>
</select>
</div>
<div class="col-sm-3">
<select class="form-control" ng-model="SelectedDay"
ng-disabled="!SelectedMonth || !SelectedYear"
ng-options="label for label in Days | limitTo:NumberOfDays">
<option value="">--Day--</option>
</select>
</div>
<div class="form-group">
<label for="name" class="col-sm-3 control-label">NIC/NIN </label>
<div class="col-sm-9">
<input type="text" class="form-control" ng-model="san.nic"
placeholder="NIC/NIN">
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-3 control-label">Adds </label>
<div class="col-sm-9">
<input type="text" class="form-control" ng-model="san.adds"
>
</div>
</div>
I am trying to disable button using below code
<button type="button" ng-disabled="!san.nic || !san.adds || !SelectedMonth || !SelectedYear || !SelectedDay">Reset</button>
Above button is did not disabled correctly. But when i remove month,year,day its working. according to my requirement i can not change that month,year,day model names.
below button is working well. how i disable reset button using all the models
<button type="button" ng-disabled="!san.nic || !san.adds">Reset</button>

Set text field min and max value based on the option selected in previous dropdown

I have a drop down and a text box next to it.
When some value is selected in the dropdown, the textbox should allow min and max characters based on the selected option.
Suppose I select option 1, then the textbox next to it should allow minimum 10 characters and max 16 characters.
How to achieve it?
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="required">Select Type</label>
<select class="form-control" id="prooftype">
<option value="0" disabled> </option>
<option value="name1">name1</option>
<option value="name2">name2</option>
<option value="name3">name3</option>
<option value="name4">name4</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group md-form">
<label class="required" for="id" data-error="wrong" data-success="right">
<i class="fa fa-info pr-2"></i>
Enter Identity Card Number
</label>
<input id="id" type="number" minlength="3" class="form-control validate" autocomplete="off" onkeypress="return blockSpecialChar(event)" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="20" />
</div>
</div>
</div>

you have to change a little your code
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="required">Select Type</label>
<select class="form-control" id="prooftype">
<option value="0/0" disabled> </option>
<option value="10/16">name1</option>
<option value="20/32">name2</option>
<option value="30/48">name3</option>
<option value="40/64">name4</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group md-form">
<label class="required" for="id" data-error="wrong" data-success="right">
<i class="fa fa-info pr-2"></i>
Enter Identity Card Number
</label>
<input id="id" type="text" minlength="3" class="form-control validate" autocomplete="off" onkeypress="return blockSpecialChar(event)" maxlength="20" />
</div>
</div>
</div>
and jQuery
$('#prooftype').change(function(){
var tmp = $(this).val().split('/');
$('input#id').attr('minlength',tmp[0]).attr('maxlength',tmp[1]);
})

If you pass the the option value of 12/16 to the backend, obviously the data will reflect. I think you need something like this:
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="required">Select Type</label>
<select class="form-control" id="prooftype">
<option value="0/0" disabled> </option>
<option value="name1">name1</option>
<option value="name2">name2</option>
<option value="name3">name3</option>
<option value="name4">name4</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group md-form">
<label class="required" for="id" data-error="wrong" data-success="right">
<i class="fa fa-info pr-2"></i>
Enter Identity Card Number
</label>
<input id="inputid" type="text" minlength="3" class="form-control validate" autocomplete="off" onkeypress="return blockSpecialChar(event)" maxlength="20" />
</div>
</div>
</div>
And your JQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
var selectedopt;
$('#prooftype').change(function(){
selectedopt= $(this).val();
//Add your condition here, and check the selected option value:
if(selectedopt== "name1")
{
//Set input min and max value based on the selected option value.
$('#inputid').attr('minlength','10').attr('maxlength','16');
}
elseif(selectedopt== "name2")
{
$('#inputid').attr('minlength','20').attr('maxlength','25');
}
// And so on........
})
</script>

how to hide data combobox dropdown when clicked

I have a form consisting of some text fields and combo box. I have a combo box that contains the data classroom, the data in the combo box I take from the database. problems = if the data 1 in the combo box in klic then the data 1 will be hidden. when it wants further data fed the data 1 remain hidden. but the data 1 hidden is determined by the expiration date
FORM ADD CLASSROOM
<div class="row">
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading"><svg class="glyph stroked email"><use xlink:href=""></use></svg>Add Training Form</div>
<div class="panel-body">
<form action="add.php" method="POST" enctype="multipart/form-data">
<fieldset>
<!-- Training Name -->
<div class="form-group">
<label class="col-md-3 control-label" for="name">Training Name</label>
<div class="col-md-9">
<input id="name" name="name" required="required" type="text" placeholder="Tulis Nama Training" class="form-control">
</div>
</div>
<br><br>
<!-- Class Room -->
<div class="form-group">
<label class="col-md-3 control-label" for="name">Class Room</label>
<div class="col-md-9">
<select name="room" class="form-control input-sm" value=" ">
<option value="-1" selected="selected" disabled="disabled" >-Ruang Kelas-</option>
<?php
include 'admin/connection.php';
// query untuk menampilkan semua Classroom dari tabel
$query = "SELECT * FROM classroom";
$hasil = mysql_query($query);
while ($data = mysql_fetch_array($hasil))
{
echo "<option value='".$data['nama']."'>".$data['nama']."</option>";
}
?>
<option value="Other">Other</option>
</select>
</div>
</div>
<br><br>
<!-- Instructor -->
<div class="form-group" onsubmit="return validasicombobox">
<label class="col-md-3 control-label" for="name">Instructor</label>
<div class="col-md-9">
<select id="instruc" name="instructor" class="form-control input-sm" value=" ">
<option value="-1" selected="selected" disabled="disabled" >-Instructor-</option>
<?php
include 'admin/connection.php';
// query untuk menampilkan semua Classroom dari tabel
$query = "SELECT * FROM instruk";
$hasil = mysql_query($query);
while ($data = mysql_fetch_array($hasil))
{
echo "<option value='".$data['nama']."'>".$data['nama']."</option>";
}
?>
<option value="Other">Other</option>
</select>
</div>
</div>
<br><br>
<!-- Time -->
<div class="form-group">
<label class="col-md-3 control-label" for="name">Time</label>
<div class="col-md-9">
<input id="time" name="time" type="text" required="required" placeholder="Tulis Waktu Training" class="form-control">
</div>
</div>
<br><br>
<!-- Start Date -->
<div class="form-group">
<label class="col-md-3 control-label" for="name">Start Date</label>
<div class="col-md-9">
<input id="start_date" name="start_date" required="required" type="date" class="form-control">
</div>
</div>
<br><br>
<!-- End Date -->
<div class="form-group">
<label class="col-md-3 control-label" for="name">End Date</label>
<div class="col-md-9">
<input id="end_date" name="end_date" required="required" type="date" class="form-control">
</div>
</div>
<br><br>
<!-- Type -->
<div class="form-group">
<label class="col-md-3 control-label" for="name">Type</label>
<div class="col-md-9">
<select name="type" class="form-control input-sm">
<option value="-1" selected="selected" disabled="disabled" >-Tipe Training-</option>
<option value="Basic">Basic</option>
<option value="Type">Type</option>
</select>
</div>
</div>
<br><br>
<!-- Remark -->
<div class="form-group">
<label class="col-md-3 control-label" for="name">Remark</label>
<div class="col-md-9">
<textarea name="remark" class="form-control" rows="3"></textarea>
</div>
</div>
<br><br>
<!-- Form actions -->
<div class="form-group">
<div class="col-md-12 widget-right">
<button type="submit" value="submit" name ="submit" class="btn btn-default btn-md pull-right" onclick="return confirm('Are you sure want to add this data?');">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div> <!--/.main-->

How to get show text box, When change the dropdown list

I have one drop down list which has two options
<div class="form-group">
<span class="col-sm-4 control-span">Member Type</span>
<div class="col-sm-8">
<select class="form-control" id="membertype" name="membertype" ng-model="membertype">
<option value="">-- Select Member Type --</option>
<option value="owner">Owner</option>
<option value="member">Member</option>
</select>
</div>
</div>
When i select the owner, I have to show one text box section
<div class="form-group">
<span class="col-sm-4 control-span">Your Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="membernumber" name="membernumber" placeholder="Membership Number">
</div>
</div>
When i select the member, I have to show one text box section
<div class="form-group">
<span class="col-sm-4 control-span">Owner Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="ownernumber" name="ownernumber" placeholder="Owner Membership Number">
</div>
</div>
It is happening at onchange event.
If i not selecting no one, These two text box sections will be hide.
How to make this functionality

you can user ng-show or ng-hide to do this, here is a demonstration,
when ng-model="membertype" is equals to 'owner' it will show the below div;
<div class="form-group" ng-show="(membertype == 'owner')">
<span class="col-sm-4 control-span">Your Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="membernumber" name="membernumber" placeholder="Membership Number">
</div>
</div>
when ng-model="membertype" is equals to 'member' it will show the below div;
<div class="form-group" ng-show="(membertype == 'member')">
<span class="col-sm-4 control-span">Owner Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="ownernumber" name="ownernumber" placeholder="Owner Membership Number">
</div>
</div>

<div class="form-group">
<span class="col-sm-4 control-span">Member Type</span>
<div class="col-sm-8">
<select class="form-control" id="membertype" name="membertype" ng-model="membertype">
<option value="">-- Select Member Type --</option>
<option value="owner">Owner</option>
<option value="member">Member</option>
</select>
</div>
</div>
<div class="form-group" ng-show="membertype == 'member'">
<span class="col-sm-4 control-span">Your Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="membernumber" name="membernumber" placeholder="Membership Number">
</div>
</div>
divs to show on event change in dropdown
<div class="form-group" ng-if="membertype == 'owner'">
<span class="col-sm-4 control-span">Owner Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="ownernumber" name="ownernumber" placeholder="Owner Membership Number">
</div>
</div>

On page load set textbox visibility to none using style
<div class="col-sm-8">
<input type="text" class="form-control" id="ownernumber" name="ownernumber" placeholder="Owner Membership Number" style="display:none" >
</div>
OnChange of dropdownlist call the script
<script>
yourfunction(value)
{
if(value === "owner")
{
document.getElementById("ownernumber").style.display="block";
}
}
</script>