Notification div is not showing upon matching the fields in jquery - javascript

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>

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

jQuery class doesn't add on changing the option of a select box

I have attributes (color, size) and their units(black,blue || 32cm,42cm).
I want when selecting the color from the select box it should open the first unit's select box (black, blue) and when to click on size then it should open the 2nd select box (32cm,42cm). I've done almost everything but not been able to get the expected result.
$(document).ready(function(){
//attr selector with options of units
$('.attr-selector').change(function(){
var data = $(this).children().attr('data-link');
$('.unit-select').removeClass('active');
$('#'+data).addClass('active');
});
});
.unit-select{
display: none;
}
.unit-select.active{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<!--*** ATTR ****-->
<div class="col-2">
<div class="form-group">
<select class="form-control attr-selector">
<option>Select</option>
<option value="" data-link="1"><b>Color</b></option>
<option value="" data-link="2"><b>Size</b></option>
<option value="" data-link="3"><b>Space</b></option>
</select>
</div>
</div>
<!--***Units Of attr 1***-->
<div class="col-2 unit-select" id="1">
<div class="form-group">
<select class="form-control">
<option value=""><b>Red</b></option>
<option value="" ><b>Green</b></option>
<option value=""><b>Blue</b></option>
</select>
</div>
</div>
<!--***Units Of attr 2***-->
<div class="col-2 unit-select" id="2">
<div class="form-group">
<select class="form-control">
<option value=""><b>32</b></option>
<option value="" ><b>40</b></option>
<option value=""><b>42</b></option>
</select>
</div>
</div>
<!--***Units Of attr 3***-->
<div class="col-2 unit-select" id="3">
<div class="form-group">
<select class="form-control">
<option value=""><b>Color</b></option>
<option value="" ><b>Size</b></option>
<option value=""><b>Space</b></option>
</select>
</div>
</div>
</div>

You need to target only the selected option and its corresponding data-attr.
$(document).ready(function(){
//attr selector with options of units
$('.attr-selector').change(function(){
var data = $(this).find('option:selected').attr('data-link');
$('.unit-select').removeClass('active');
$('#'+data).addClass('active');
});
});
.unit-select{
display: none;
}
.unit-select.active{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<!--*** ATTR ****-->
<div class="col-2">
<div class="form-group">
<select class="form-control attr-selector">
<option>Select</option>
<option value="" data-link="1"><b>Color</b></option>
<option value="" data-link="2"><b>Size</b></option>
<option value="" data-link="3"><b>Space</b></option>
</select>
</div>
</div>
<!--***Units Of attr 1***-->
<div class="col-2 unit-select" id="1">
<div class="form-group">
<select class="form-control">
<option value=""><b>Red</b></option>
<option value="" ><b>Green</b></option>
<option value=""><b>Blue</b></option>
</select>
</div>
</div>
<!--***Units Of attr 2***-->
<div class="col-2 unit-select" id="2">
<div class="form-group">
<select class="form-control">
<option value=""><b>32</b></option>
<option value="" ><b>40</b></option>
<option value=""><b>42</b></option>
</select>
</div>
</div>
<!--***Units Of attr 3***-->
<div class="col-2 unit-select" id="3">
<div class="form-group">
<select class="form-control">
<option value=""><b>Color</b></option>
<option value="" ><b>Size</b></option>
<option value=""><b>Space</b></option>
</select>
</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/

Hide And show html tab with a drop down menu

here is my code ..i code a php page where i want, if we select scholarship status yes then some options show below like bank name , branch etc and if we select scholarship status no , then not show any option.
<div class="controls">
<select id="" name="Scholarship info">
<option value="">select</option>
<option value="yes">yes</option>
<option value="no">no</option>
</select>
</div>
and if we select yes then show that options otherwise if we select no ..not show below options....
<div class="controls">
<select id="" name="Bank name">
<option value="">select</option>
<option value="state bank">State bank</option>
<option value="Canera Bank">Canera bank</option>
</select>
</div>
<div class="controls">
<select id="" name="Branch name">
<option value="">select</option>
<option value="amethi">amethi</option>
<option value="lucknow">lucknow</option>
</select>
</div>
<div class="controls">
<select id="" name="account number">
<input type="text" class="span6 typeahead" name="acoountnumber" placeholder="account number" value="<?php echo
set_value('accountnumber'); ?>" />
</div>

LIVE DEMO
$(document).ready(function() {
$("select[name='Bank name']").hide();
$("select[name='Branch name']").hide();
$("select[name='account number']").hide();
$("input[name='acoountnumber']").hide();
});
$("select[name='Scholarship info']").change(function() {
var selectedVal = $(this).val();
if(selectedVal == 'yes') {
$("select[name='Bank name']").show();
$("select[name='Branch name']").show();
$("select[name='account number']").show();
$("input[name='acoountnumber']").show();
} else {
$("select[name='Bank name']").hide();
$("select[name='Branch name']").hide();
$("select[name='account number']").hide();
$("input[name='acoountnumber']").hide();
}
});

If you add an extra class, withScholarship to the divs you want to show and hide, it is gets even easier. See this JSFiddle
<div class="controls">
<select id="" name="Scholarship info">
<option value="">select</option>
<option value="yes">yes</option>
<option value="no">no</option>
</select>
</div>
<div class="controls withScholarship">
<select id="" name="Bank name">
<option value="">select</option>
<option value="state bank">State bank</option>
<option value="Canera Bank">Canera bank</option>
</select>
</div>
<div class="controls withScholarship">
<select id="" name="Branch name">
<option value="">select</option>
<option value="amethi">amethi</option>
<option value="lucknow">lucknow</option>
</select>
</div>
<div class="controls withScholarship">
<input type="text" class="span6 typeahead" name="acoountnumber" placeholder="account number" value="121"/>
</div>
<script type="text/javascript">
$(".withScholarship").hide();
$("select[name='Scholarship info']").change(function() {
var flag = $(this).val() == "yes";
$(".withScholarship").toggle(flag);
})
</script>

Categories