Jquery chosen remove attributes by name or id

Jquery chosen remove attributes by name or id - javascript

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>

Related

Show/hide dropdown based on another dropdown selection

When a user selects "Yes" for Menu1, I am trying to make Menu2 appear. When "Yes" is selected for Menu3, Menu4 should appear, etc. What am I missing or doing wrong? Thank you in advance!
$(function() {
$("#Menu2").hide();
$("#Menu3").hide();
$("#Menu4").hide();
$("#Menu5").hide();
$("#Menu6").hide();
$("#Menu1").change(function() {
if ($(this).val() == "Yes") {
$("#Menu2").show();
} else {
$("#Menu2").hide();
}
});
$("#Menu2").change(function() {
if ($(this).val() == "Yes") {
$("#Menu3").show();
} else {
$("#Menu3").hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
<div class="form-group col-md-4">
<label for="Menu1">Menu1</label>
<select class="form-control" name="name" id="Menu1">
<option value="">--Please choose an option--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<div class="form-group col-md-4" id="Menu2">
<label for="Menu2">Menu2</label>
<select class="form-control" name="pets" id="Menu2">
<option value="">--Please choose an option--</option>
<option value="dog">Yes</option>
<option value="cat">No</option>
</select>
</div>
<div class="form-group col-md-4" id="Menu2">
<label for="Menu2">Menu2</label>
<select class="form-control" name="pets" id="Menu2">
<option value="">--Please choose an option--</option>
<option value="dog">Yes</option>
<option value="cat">No</option>
</select>
</div>

The problem was in the naming and also in the structure of your jQuery
$(document).ready(function(){
$("#menu2").hide();
$("#menu3").hide();
});
$(document).on('change',"#select1", function () {
if ($(this).val() == "Yes") {
$("#menu2").show();
} else {
$("#menu2").hide();
}
});
$(document).on('change',"#select2", function () {
if ($(this).val() == "Yes") {
$("#menu3").show();
} else {
$("#menu3").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-4">
<label for="Menu1">Menu1</label>
<select class="form-control" name="name1" id="select1">
<option value="">--Please choose an option--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<div class="form-group col-md-4" id="menu2">
<label for="Menu2">Menu2</label>
<select class="form-control" name="name2" id="select2">
<option value="">--Please choose an option--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<div class="form-group col-md-4" id="menu3">
<label for="Menu2">Menu3</label>
<select class="form-control" name="name3" id="select3">
<option value="">--Please choose an option--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>

Your html and javascript both are wrong. you can not give same id for multiple controls. Here is an example
Live Demo
<div class="form-row">
<div class="form-group col-md-4">
<label for="Menu1">Menu1</label>
<select class="form-control" name="name" id="Menu1">
<option value="">--Please choose an option--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<div class="form-group col-md-4" id="divMenu2">
<label for="Menu2">Menu2</label>
<select class="form-control" name="pets" id="Menu2">
<option value="">--Please choose an option--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<div class="form-group col-md-4" id="divMenu3">
<label for="Menu2">Menu3</label>
<select class="form-control" name="pets" id="Menu2">
<option value="">--Please choose an option--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(function() {
$("#divMenu2").hide();
$("#divMenu3").hide();
$("#Menu1").change(function() {
if ($(this).val() == "Yes") {
$("#divMenu2").show();
} else {
$("#divMenu2").hide();
}
});
$("#Menu2").change(function() {
if ($(this).val() == "Yes") {
$("#divMenu3").show();
} else {
$("#divMenu3").hide();
}
});
});

Jquery On change array ID

I have multiple selector on loop in php code
var new_acc = $("div[id^=new_acc]").hide();
for (var i = 1; i <= id; i++) {
$('#reason_change\\['+id+'\\]').change(function(e) {
$( "#reason_change\\["+id+"\\] ").show();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="reason_change[1]" id="reason_change[1]" >
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[1]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[1]" value="">
</div>
<select name="reason_change[2]" id="reason_change[2]" >
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[2]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[2]" value="">
</div>
if i click on change my selctor id = reason_change[2] i wanna show id="new_acc[2]" showing

Your JS doesn't need the loop and doesn't need to reference the individual element IDs, because you can select all of the select elements at once and bind a single change handler to them, then within the handler use this to reference the changing element and (DOM navigation method) .next() to get its associated div element:
$("select[id^=reason_change]").change(function() {
$(this).next().show();
});
If you wanted to make it so that the div is only shown when certain values are selected in the select element, and hidden otherwise, you can do something like this:
var new_acc = $("div[id^=new_acc]").hide();
$("select[id^=reason_change]").change(function() {
if(this.value === "2") { // show only if certain option is selected
$(this).next().show();
} else {
$(this).next().hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="reason_change[1]" id="reason_change[1]" >
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[1]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[1]" value="">
</div>
<select name="reason_change[2]" id="reason_change[2]" >
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[2]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[2]" value="">
</div>

var new_acc = $("div[id^=new_acc]").hide();
$("select[id^=reason_change]").change(function() {
if($(this).val() === "2"){
$(this).next().show();
} else {
$(this).next().hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="reason_change[1]" id="reason_change[1]" >
<option value="">--Select--</option>
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[1]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[1]" value="">
</div>
<select name="reason_change[2]" id="reason_change[2]">
<option value="">--Select--</option>
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[2]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[2]" value="">
</div>

How to show a hidden drop down based on a drop down choice

I posted last week about being able to toggle a hidden field based on a choice. I am having an issue now where, when I click on a choice from a dropdown selection, it won't hide/show the other dropdown I want displayed.
JSFiddle
I appreciate any help :)
jQuery
$(document).ready(function () {
$('select[name="YourLocation"]').change(function () {
if ($(this).val() == 'Customer Care Center') {
$('.CCC').show();
} else {
$('.CCC').hide();
}
});
});
HTML
<div class="col-md-3">
<div class="form-group">
<label>Your Location</label>
<select name="YourLocation" class="form-control select2" style="width: 100%;" required>
<option value="" disabled selected>Select Your Location</option>
<option value="Branch">Branch</option>
<option value="Region">Region</option>
<option value="Division">Division</option>
<option value="Customer Care Center">Customer Care Center</option>
<option value="Corporate">Corporate</option>
</select>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="form-group">
<label></label>
<select name="YourCenter" class="form-control select2 CCC" style="width: 100%;" required>
<option value="" disabled selected>Select Your Center</option>
<option value="Dallas">Dallas</option>
<option value="Los Angeles">Los Angeles</option>
<option value="Phoenix">Phoenix</option>
<option value="Tampa">Tampa</option>
</select>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->

It is working but one small suggeston to improve your code.
When you hide the 2nd dropdown you should unselect the selected option first so use
$('.CCC').val(null).hide();
Otherwise even it is hidden, it is still selected and when you submit it might cause trouble and you will have bad data.
$('select[name="YourLocation"]').change(function() {
if ($(this).val() == 'Customer Care Center') {
$('.CCC').show();
} else {
$('.CCC').val(null).hide();
}
});
$(document).ready(function() {
$('select[name="YourLocation"]').change(function() {
if ($(this).val() == 'Customer Care Center') {
$('.CCC').show();
} else {
$('.CCC').val(null).hide();
}
});
});
.CCC {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="form-group">
<label>Your Location</label>
<select name="YourLocation" class="form-control select2" style="width: 100%;" required>
<option value="" disabled selected>Select Your Location</option>
<option value="Branch">Branch</option>
<option value="Region">Region</option>
<option value="Division">Division</option>
<option value="Customer Care Center">Customer Care Center</option>
<option value="Corporate">Corporate</option>
</select>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="form-group">
<label></label>
<select name="YourCenter" class="form-control select2 CCC" style="width: 100%;" required>
<option value="" disabled selected>Select Your Center</option>
<option value="Dallas">Dallas</option>
<option value="Los Angeles">Los Angeles</option>
<option value="Phoenix">Phoenix</option>
<option value="Tampa">Tampa</option>
</select>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->

Try this......
<select id="YourLocation" class="form-control select2" style="width: 100%;" required>
<option value="" disabled selected>Select Your Location</option>
<option value="Branch">Branch</option>
<option value="Region">Region</option>
<option value="Division">Division</option>
<option value="Customer Care Center">Customer Care Center</option>
<option value="Corporate">Corporate</option>
</select>
$(document).ready(function () {
$('#YourLocation').change(function ()
{
if ($(this).val() == 'Customer Care Center') {
$('.CCC').show();
} else {
$('.CCC').hide();
}
});
});

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/

We Keep Coding

JavaScript is the programming language of the Web.

Jquery chosen remove attributes by name or id - javascript

Related

Show/hide dropdown based on another dropdown selection

Jquery On change array ID

How to show a hidden drop down based on a drop down choice

Notification div is not showing upon matching the fields in jquery

how to disable required on cancel selcted

Categories

Resources