Reset and clear from first dropdown with jQuery - javascript

My apologize, Is there a way to reset and clear all dropdown to the original state, when a user select the first dropdown. Hope I explain myself clearly. Thank you in advance.
HTML
<div class="form-group row">
<div class="col-sm-6">
<div id="#divAreYouGoingOnVacation">
<label asp-for="AreYouGoingOnVacation">Are You Going On Vacation</label>
<select asp-for="AreYouGoingOnVacation" class="form-control" id="AreYouGoingOnVacation"
required>
<option value="" selected>-- Please choose an option --</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div id="divWouldYouBeTakingASpouse">
<label asp-for="WouldYouBeTakingASpouse">Would You Be Taking A Spouse?</label>
<select asp-for="WouldYouBeTakingASpouse" class="form-control"
id="WouldYouBeTakingASpouse" required>
<option value="" selected>-- Please choose an option --</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br /><br />
</div>
</div>
jQuery
$("#AreYouGoingOnVacation").change(function () {
if ($(this).val() == "Yes") {
$("#divWouldYouBeTakingASpouse").show();
} else {
$("#divWouldYouBeTakingASpouse").hide();
}
});
$("#WouldYouBeTakingASpouse").change(function () {
if ($(this).val() == "Yes") {
$("#divHowLongAreYouWillingToWaitForFood").show();
} else {
$("#divHowLongAreYouWillingToWaitForFood").hide();
}
});
});

if I understand you correct you would reset the value for the second dropdown
if the first dropdown changed.
it would be like this
$('#AreYouGoingOnVacation').on('change', function(){
$('#WouldYouBeTakingASpouse').val('');
})

Related

Jquery chosen remove attributes by name or id

I'm using Chosen from jQuery to add/hide some form datas based on previous inputs.. I want to ask how I can not hide an entire select only a few elements from in based on id/name.
Thank you.
Based on
$("#otherField2").chosen()
$("#seeAnotherField2").chosen()
// This way I can hide all options if nothing is chosen
$("#seeAnotherField2").change(
function() {
if ($(this).val() == "nothing") {
$('#otherFieldDiv2').show();
$('#otherField2').attr('required', '');
$('#otherField2').attr('data-error',
'This field is required.');
} else {
$('#otherFieldDiv2').hide();
$('#otherField2').removeAttr('required');
$('#otherField2').removeAttr('data-error');
}
});
$("#seeAnotherField2").trigger("change");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js" ></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" />
<div class="form-group" id="otherFieldDiv3">
<label for="otherField3">Sev</label>
<select class="form-control" id="otherField2">
<option value="nor" id="1">Nor</option>
<option value="sev" id="2">Sev</option>
<option value="min" id="3">Min</option>
</select>
</div>
Hide only option1 from this:
<div class="form-group">
<label for="seeAnotherField2">Options</label>
<select class="form-control" id="seeAnotherField2">
<option value="nothing">Nothing</option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
</select>
</div>
Try this:
$("#seeAnotherField2").change(function() {
if ($(this).val() == "nothing") {
$("#otherField2 option[value='nor']").hide();
$("#otherField2 option[value='sev']").attr('selected','selected');
}else{
$("#otherField2 option[value='nor']").show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="otherFieldDiv3">
<label for="otherField3">Sev</label>
<select class="form-control" id="otherField2">
<option value="nor" id="1">Nor</option>
<option value="sev" id="2">Sev</option>
<option value="min" id="3">Min</option>
</select>
</div>
Hide only option1 from this:
<div class="form-group">
<label for="seeAnotherField2">Options</label>
<select class="form-control" id="seeAnotherField2">
<option value="nothing">Nothing</option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
</select>
</div>

I have two drop down list when I select value form first drop down it change in enable disable in second drop down list

In my first drop down list I have
<div class="form-group row">
<label class="col-md-4">L.R. Pay Mode</label>
<select name="lr_pay_mode" id="lr_pay_mode">
<option value="">Select</option>
<option value="1">Paid</option>
<option value="2">To Pay</option>
</select>
</div>
And my second drop down list I have
<div class="form-group row">
<label class="col-md-4">Mode Of Payment</label>
<select name="mode_of_payment" id="mode_of_payment">
<option value="">Select</option>
<option value="1">Cash</option>
<option value="2">Cheque</option>
</select>
</div>
When I select Paid in first drop down it enable the 2nd drop down list Otherwise disabled
please give me some solution how I can do
You can add/remove disabled property to the second drop down based on the selected value of the first drop down:
$('#lr_pay_mode').change(function(){
if((this).value != '1')
$('#mode_of_payment').attr('disabled','disabled')
else
$('#mode_of_payment').removeAttr('disabled')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row">
<label class="col-md-4">L.R. Pay Mode</label>
<select name="lr_pay_mode" id="lr_pay_mode">
<option value="">Select</option>
<option value="1">Paid</option>
<option value="2">To Pay</option>
</select>
</div>
<div class="form-group row">
<label class="col-md-4">Mode Of Payment</label>
<select name="mode_of_payment" id="mode_of_payment" disabled>
<option value="">Select</option>
<option value="1">Cash</option>
<option value="2">Cheque</option>
</select>
</div>
$('#lr_pay_mode').change(function(){
if ($(this).val() == '1') {
$("#mode_of_payment").prop("disabled", true);
} else {
$("#mode_of_payment").prop("disabled", false);
}
});
and by default disabled second dropdown
<div class="form-group row">
<label class="col-md-4">Mode Of Payment</label>
<select name="mode_of_payment" id="mode_of_payment" disabled>
<option value="">Select</option>
<option value="1">Cash</option>
<option value="2">Cheque</option>
</select>
</div>
I hope it will help

Select drop down list item if value match from group label?

I wanna add a dynamic function that will auto select the drop down list if/with any of the value that matches the input fields label?
In the snippet bellow, Product Code should be selected ( since label IS Product Code)
<div class="col-sm-12 col-md-4">
<div class="form-group">
<label for="">Product Code</label> <select id="ddlProductCode"
class="form-control input-sm">
<option value="0">
--Select--
</option>
<option value="Product Code">
Product Code
</option>
<option value="Product Name">
Product Name
</option>
<option value="Product Description">
Product Description
</option>
<option value="Product Category">
Product Category
</option>
<option value="Product Sub Category">
Product Sub Category
</option>
</select>
</div>
</div>
Many thanks in advance!
Dav
If I understood you correctly, this will help:
$(function() {
var $ddlProductCode = $('#ddlProductCode');
var labelValue = $select.prevAll("label:first").text();
$select.val(labelValue);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-12 col-md-4">
<div class="form-group">
<label for="">Product Code</label> <select id="ddlProductCode"
class="form-control input-sm">
<option value="0">
--Select--
</option>
<option id="asd" value="Product Code">
Product Code
</option>
<option value="Product Name">
Product Name
</option>
<option value="Product Description">
Product Description
</option>
<option value="Product Category">
Product Category
</option>
<option value="Product Sub Category">
Product Sub Category
</option>
</select>
</div>
</div>
Check jquery that will select the value based on the label text
$('#ddlProductCode option:contains(' + $('#lbl').text() +')').each(function(){
if ($(this).val() == $('#lbl').text()) {
$(this).attr('selected', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-12 col-md-4">
<div class="form-group">
<label id="lbl" for="">Product Code</label> <select id="ddlProductCode"
class="form-control input-sm">
<option value="0">
--Select--
</option>
<option value="Product Code">
Product Code
</option>
<option value="Product Name">
Product Name
</option>
<option value="Product Description">
Product Description
</option>
<option value="Product Category">
Product Category
</option>
<option value="Product Sub Category">
Product Sub Category
</option>
</select>
</div>
</div>
You can loop through every option and select the one matching the label text like this:
$('option').each(function(i, option) {
if ( option.value == $('label').text() ) {
option.selected = "selected";
}
});
for (i = 0; i < yourselect.length; ++i) {
if (yourselect.options[i].value == yourvalue) {
yourselect.value = yourvalue;
}
}
Well unfortunately that's not the way you should be using the <label> tag.
The HTML element represents a caption for an item in a user
interface. -- Mozilla docs
So, <label> is not meant to say what the value should be.
If you want to set a default value just add selected to that <option>.
I'm not entirely sure of why you would do this, so maybe I am misunderstanding but to answer your question you could set the <option> based off the label name.
There's no need to loop through the options:
$('#ddlProductCode').val($('label').text())

Notification div is not showing upon matching the fields in jquery

I was trying to match the text box text to the dropdown text. When it matched it select the option from the dropdown. I want to show the notication when the text does not matched from the dropdown and when it matched it should hide the notification. Problem is i am not able to hide it when it matched. Here is my jquery. This is what i tried so far.
$(document).ready(function(){
$("#txt_scheme").keyup(function(){
var valueFromText=$("#scheme option").filter(function(i,option)
{
return $(option).text().toLowerCase()==$("#txt_scheme").val().toLowerCase();
}).val();
if ($("#txt_scheme").val() == '' || $('#scheme option:selected').text().toLowerCase() == $("#txt_scheme").val()){
$('#notify').hide(500);
}
else{
$('#notify').show(500);
}
$("#scheme").val(valueFromText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-4 control-label">Scheme**</label>
<div class="col-sm-4">
<select class="form-control" name="scheme" id="scheme">
<option value="A">QC code</option>
<option value="B">Analyte</option>
<option value="B">Assay Value</option>
<option value="D">Assigned Value</option>
<option value="E">STANDARDDEVIATION</option>
<option value="F">ACCEPTABLEMIN</option>
<option value="G">ACCEPTABLEMAX</option>
<option value="H">Sample ID</option>
<option value="I">Date</option>
</select>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="txt_scheme" name="txt_scheme" placeholder="Or Type here">
<div class="alert alert-danger" id='notify' style="display: none; width: 50%">
<strong>Alert!</strong> Nothing matched select from dropdown
</div>
</div>
</div>
Any help?
You've just to put the selection :
$("#scheme").val(valueFromText);
Before the condition, so the $('#scheme option:selected').text() will return the right text to check.
Hope this helps.
$(document).ready(function(){
$("#txt_scheme").keyup(function(){
var valueFromText=$("#scheme option").filter(function(i,option){
return $(option).text().toLowerCase()==$("#txt_scheme").val().toLowerCase();
}).val();
$("#scheme").val(valueFromText);
if ($("#txt_scheme").val() == '' || $('#scheme option:selected').text().toLowerCase() == $("#txt_scheme").val()){
$('#notify').hide(500);
}
else{
$('#notify').show(500);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-4 control-label">Scheme**</label>
<div class="col-sm-4">
<select class="form-control" name="scheme" id="scheme">
<option value="A">QC code</option>
<option value="B">Analyte</option>
<option value="B">Assay Value</option>
<option value="D">Assigned Value</option>
<option value="E">STANDARDDEVIATION</option>
<option value="F">ACCEPTABLEMIN</option>
<option value="G">ACCEPTABLEMAX</option>
<option value="H">Sample ID</option>
<option value="I">Date</option>
</select>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="txt_scheme" name="txt_scheme" placeholder="Or Type here">
<div class="alert alert-danger" id='notify' style="display: none; width: 50%">
<strong>Alert!</strong> Nothing matched select from dropdown
</div>
</div>
</div>

how to disable required on cancel selcted

i have two select dropdown one for selected rooms and select cancel booking..
<div>Confirm:</div>
<div>
<select id="status" name="status" class="form-control" required>
<option value="1">room2</option>
<option value="2">rrom2</option>
</select>
</div>
<div>Status:</div>
<div>
<select id="status" name="status" class="form-control" >
<option value="1">Confirm booking</option>
<option value="2">Cancel booking</option>
</select>
</div>
now i want the cancel booking by selecting cancel and submit, but probelm is there first select is required, i want required only in confirm , how i can do this
Try this:
Add select-room and booking-status class in 2 selectbox so that detect it event. because you have same id status in 2 selectbox. please set unique id for each of the element in html.
$(".booking-status").change(function(){ // use change event for select box of booking
if($(this).val() == "2") {
$(".select-room").removeAttr("required");
} else {
$(".select-room").attr("required","required");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Confirm:</div>
<div>
<select id="status1" name="status" class="form-control select-room" required>
<option value="1">room2</option>
<option value="2">rrom2</option>
</select>
</div>
<div>Status:</div>
<div>
<select id="status2" name="status" class="form-control booking-status" >
<option value="1">Confirm booking</option>
<option value="2">Cancel booking</option>
</select>
</div>
Please be sure that id should be unique in an HTML page. You seemed to have used same id's for these two select boxes.
<div>Confirm:</div>
<div>
<select id="room" name="room" class="form-control" required>
<option value="1">room2</option>
<option value="2">rrom2</option>
</select>
</div>
<div>Status:</div>
<div>
<select id="status" name="status" class="form-control" >
<option value="1">Confirm booking</option>
<option value="2">Cancel booking</option>
</select>
</div>
Now use the jQuery code:
$(function(){
$("#status").on("change", function(){
if($(this).val() == 2) {
$("#room").attr("required", false);
} else {
$("#room").attr("required", true);
}
});
});
Refer to this JS Fiddle: https://jsfiddle.net/gx0s27s9/

Categories