I had tried to make text box disable. It's working when I take only single value. When I give or condition like "1" || "2" || "6" the text box is not being disabled. And if I select value "6" then one text box should exist.
I've tried this code:
$('#education').on('change', function() {
if ($(this).val() == "6" || "1" || "4") {
$('#degree').prop("disabled", true);
} else {
$('#degree').prop("disabled", false);
}
$('#txtData').show();
else
$('#txtData').hide();
});
See also the following Fiddle.
What shall I change?
Actually there are few errors in the code you wrote, that needs to be fixed:
To compare a value with three multiple values you can't just call,
$(this).val() == "6" || "1" || "4" . You need to compare $(this).val() with each one of these values separately, or you can put these values in an array and check if the value exists.
You are trying to get an element with ids degree and
education that don't exist in the page, make sure to refer existing elements.
And there's a last else mis-placed, when you want to execute
multiple statements when a condition is true just put them all in
the same if/else block.
If you want to check for a specific value among these 3 values, you can use an inner if block inside the first one, to do it.
This is how should be your code:
$('#myselect').on('change', function() {
if (["6", "1", "4"].indexOf($(this).val()) > -1) {
$('#txtData').prop("disabled", true);
if ("4" == $(this).val())
$('#txtData').hide();
else
$('#txtData').show();
} else {
$('#txtData').prop("disabled", false);
$('#txtData').show();
}
});
Demo:
$('#myselect').on('change', function() {
if (["6", "1", "4"].indexOf($(this).val()) > -1) {
$('#txtData').prop("disabled", true);
if ("4" == $(this).val())
$('#txtData').hide();
else
$('#txtData').show();
} else {
$('#txtData').prop("disabled", false);
$('#txtData').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Two</option>
<option value="5">Three</option>
<option value="6">Three</option>
</select>
<br /> Input: <input type="text" id="txtData" />
You can disable like this: http://jsfiddle.net/a8ZWx/390/
$('#education').on('change', function() {
if ($(this).val() == "6" || $(this).val() == "1" || $(this).val() == "4") {
$('#txtData').prop("disabled", true);
} else {
$('#txtData').prop("disabled", false);
}
});
Related
I'm writing a code which reads a drop down value then perform some actions, and I try to figure out how to get the select option value and put a condition regarding to that one.
<script>
var e = document.getElementById("selectNewBalance");
var value = e.options[e.selectedIndex].value;
if (value == "Inserted values"){
/// from here to the return statement I know for sure it works but now i'm trying to apply this condition only when the select option is "Inserted values"
var checkThisOnes = ["Value1", "Value2", "Value3"];
var printThisOnes = []
var message = "Please fill these fields: "
$('#myform').submit(function() {
var result=true;
for (i = 0; i < checkThisOnes.length; i = i + 1) {
var checkedValue = $('#'+checkThisOnes[i]).val();
if (checkedValue === undefined || checkedValue === "") {
message = message + checkThisOnes[i]+ ", ";
result =false;
}
}
if (result === false) {
alert(message)
location.reload();}
return result;
});}
</script>
Reading the value from a dropdown is easier than how you did it:
var select = document.getElementById("selectNewBalance");
// add an event listener to the element
select.addEventListener('change', function(e) {
if (e.target.value === 'Inserted values') {
console.log('You can do something here')
}
})
<select id="selectNewBalance">
<option selected disabled>--</option>
<option value="Inserted values">Inserted values</option>
<option value="Other">Other</option>
</select>
With jQuery the snippet looks like:
jQuery('document').ready(function($) {
$('#selectNewBalance').on('change', function(e) {
if ($(this).val() === 'Inserted values') {
console.log('You can do something here')
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectNewBalance">
<option selected disabled>--</option>
<option value="Inserted values">Inserted values</option>
<option value="Other">Other</option>
</select>
That is all. The point is, you need to place your conditions in an event, like change, so it runs when the input value changes.
First of all, let me say I am trying to modify existing code and I am pretty unfamiliar with jquery so the script part is probably way off.
I'd have a select menu with integers for values, and when they are selected I would like to set the HTML inside the span id "stylediv"
javascript:
<script>
function styleselect() {
if (document.getElementById('globalstyleselect').value == "3") {
$(".stylediv").html('<b>Boca Style</b>');
}
if (document.getElementById('globalstyleselect').value == "2") {
$(".stylediv").html('<b>Bella Style</b>');}
}
if (document.getElementById('globalstyleselect').value == "1") {
$(".stylediv").html('<b>Terra Style</b>');
}
</script>
Html:
<select id="globalstyleselect" onchange="styleselect()">
<option value="1">Terra</option>
<option value="2">Bella </option>
<option value="3">Boca</option>
</select>
<span id="stylediv">Text to display here</span>
Change this $(".stylediv") for this $("#stylediv") since .stylediv means all elements which have class stylediv and #stylediv all elements which have id stylediv.
In your case you have a div with this id (<span id="stylediv">Text to display here</span>), so you must use the id selector.
Also I recommend you not to repeat the same selector so many times (this is error-prone); instead get it inside a variable and use it... and keep consistency in the code: if you're using jQuery get all elements with jQuery (though this is a matter of preferences)
See below snippet with the js improved too.
function styleselect() {
var value = $('#globalstyleselect').val();
var div = $("#stylediv");
if (value == "3") {
div.html('<b>Boca Style</b>');
}
if (value == "2") {
div.html('<b>Bella Style</b>');
}
if (value == "1") {
div.html('<b>Terra Style</b>');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="globalstyleselect" onchange="styleselect()">
<option value="1">Terra</option>
<option value="2">Bella </option>
<option value="3">Boca</option>
</select>
<span id="stylediv">Text to display here</span>
In jQuery, # is for selecting by id and . is for selecting by class. I would also recommend you run your function on window load so the initial value for the select is displayed.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="globalstyleselect" onchange="styleselect()">
<option value="1">Terra</option>
<option value="2">Bella </option>
<option value="3">Boca</option>
</select>
<span id="stylediv">Text to display here</span>
<script>
$(window).load(function(){
styleselect();
})
function styleselect() {
if (document.getElementById('globalstyleselect').value == "3") {
$("#stylediv").html('<b>Boca Style</b>');
}
if (document.getElementById('globalstyleselect').value == "2") {
$("#stylediv").html('<b>Bella Style</b>');}
}
if (document.getElementById('globalstyleselect').value == "1") {
$("#stylediv").html('<b>Terra Style</b>');
}
</script>
Is it possible to check if there is a match between values inside and array and values of a select box? I need to check if the value of the select box is in the array so if it is I can change its class to something else. noobie here
EDIT
I have been working on recreating my question so it can be more understandable.
On this fiddle here you can see that I am dynamically creating new selectboxes using a button! In each of the buttons, the selection is being disabled but only for that box. What I want to do is that if one value is selected all of the others will be deactivated, in all the other boxes.
I tried insert in an array all the values of the selected values and then compare them in order to disable them but I only managed to do it in each box. ALSO the data from the selectboxes come from a database!
any tips?
//this supposed to disable the selected options
$('#sig_3').on('change', '.c_service_c', function() {
var value = $('#type').val();
var selected_array = [];
$('.c_service_c option:selected').each(function() {
if ($(this).val() != "") { //$(this).val()!="" --> remove the check on 'Please Select' option
selected_array.push($(this).val()); //save selected values so that they can be disabled later
}
});
console.log('print: ' + selected_array);
//reset all values to 'Y' before changing selected to 'N'
$('.c_service_c option').each(function() {
if ($(this).val() != "") { //$(this).val()!="" --> remove the check on 'Please Select' option
$('.c_service_c option').addClass('Y'); //resetting all options to 'Y'
}
});
if (selected_array.indexOf($('.c_service_c').val()) > -1) {
$('.c_service_c option:selected').removeClass('Y');
$('.c_service_c option:selected').addClass('N');
console.log('it prints here too');
}
//disable all selected values in options array
if (selected_array.indexOf($(this).val()) > -1) {
$('.c_service_c option:selected').removeClass('Y');
$('.c_service_c option:selected').addClass('N');
console.log('it prints');
}
//disable all selected values
$('.c_service_c option').each(function() {
if ($(this).val() != "") { //$(this).val()!="" --> remove the check on 'Please Select' option
if ($(this).hasClass('N')) {
$(this).attr("disabled", true);
$(this).removeClass('N');
} else {
$(this).addClass('Y');
$(this).attr("disabled", false);
}
}
});
});
If you want for each options to check if the option exists in an array, and based on to disable it or not, you just need to loop over the options using .each() function and do your check.
This is how should be your code:
$("#dropdown option").each(function() {
if (arr.indexOf($(this).val()) > -1) {
$(this).attr('disabled', true);
}
});
var arr = ["apple", "tomato", "peach", "pineapple"];
$("#dropdown option").each(function() {
if (arr.indexOf($(this).val()) > -1) {
$(this).attr('disabled', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="dropdown">
<option value="apple">Apples</option>
<option value="orange">Oranges</option>
<option value="pineapple">Pineapple</option>
<option value="lemon">Lemon</option>
</select>
Edit:
I updated your fiddle so it's working now, your problem was that you declared selected_array in a local scope for $().each() it needs to be declared as global.
Assuming you're using jQuery as well, and assuming I understand correctly what you are asking, try the following:
//available values
var arr = ["apple", "tomato", "peach", "pineapple"];
$("#select-dropdown").on("change", function() {
//store value on local variable
var value = $(this).val();
//search the value inside the array, return -1 if can't find
var index = arr.indexOf(value);
if (index != -1) {
//found value in array, add the new class!
$(this).addClass("my-new-class");
} else {
//didnt found anything, remove class
$(this).removeClass("my-new-class");
}
});
.my-new-class{
background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="select-dropdown">
<option value="apple">Apples</option>
<option value="orange">Oranges</option>
<option value="pineapple">Pineapple</option>
</select>
I have 2 select menus and i'm trying to compare a selected value of one with another but I cannot get the conditional statement working, please see my comments in my code below and in the jsFiddle.
Here's my code and a jsFiddle:
The expected value from the #purpose select menu is "5". The var selected is my attempt at grabbing that value from the #purpose select menu.
$('#purpose').on('change', function() {
if ( this.value == '8') {
$("#business").show();
$("#investor-type").hide();
} else {
$("#business").hide();
$("#investor-type").show();
}
});
var selected = $("#purpose option:selected", this).val();
$('#investor-type').on('change', function() {
if ( this.value == '1') {
$("#disclaimer-form").show();
$(".disclaimer-content").show();
// Having trouble with this else if below
} else if ( this.value == "2" && selected == "5") {
$("#disclaimer-form").show();
$(".disclaimer-content").show();
} else {
$("#disclaimer-form").hide();
$(".disclaimer-content").hide();
}
});
1 . move the selected inside the change
$('#investor-type').on('change', function() {
var selected = $("#purpose").val();
2 . test the 5 inside the 2
else if (this.value == "2") {
$("#retailstatusyes").toggle(selected == "5");
$("#retailstatusno").toggle(selected != "5");
$("#prostatus").hide();
}
You also need to trigger the change of the investor type if the user changes the country.
Here is a full version with better var names using CSS to hide initially
$(function() {
// This shows the next select menu
$('#purpose').on('change', function() {
var other = this.value == '8';
$("#noaccess").toggle(other);
$("#investor-type").toggle(!other);
$('#investor-type').change();
});
$('#investor-type').on('change', function() {
var selected = $("#purpose").val(),
isDutch = selected == "5",
isPro = this.value == "1",
isRetail = this.value == "2";
$("#prostatus").toggle(isPro);
if (isRetail) {
$("#retailstatusyes").toggle(isDutch);
$("#retailstatusno").toggle(!isDutch);
}
else {
$("#retailstatusyes").hide();
$("#retailstatusno").hide();
}
});
});
.invtype {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="purpose" class="left">
<option value="0">Please choose a country</option>
<option value="1">Austria</option>
<option value="2">France</option>
<option value="3">Germany</option>
<option value="4">Italy</option>
<option value="5">Netherlands</option>
<option value="6">Spain</option>
<option value="7">Switzerland</option>
<option value="8">Other</option>
</select>
<select id="investor-type" class="left" style="display:none;">
<option value="0">Investor Type</option>
<option value="1">Professional Investor</option>
<option value="2">Retail Investor</option>
</select>
<div class="invtype" id="noaccess">
You have selected Other and thus you cannot access the next select menu. Soz.
</div>
<div class="invtype" id="prostatus">
You are a pro investor
</div>
<div class="invtype" id="retailstatusno">
You are a retail investor but NOT from the Netherlands
</div>
<div class="invtype" id="retailstatusyes">
You are a retail investor AND you are from the Netherlands. Congrats.
</div>
move the assignment of selected inside change of #investor-type.
take look at this link
// This shows the next select menu
$('#purpose').on('change', function() {
if ( this.value == '8') {
$("#noaccess").show();
$("#investor-type").hide();
$("#prostatus").hide();
$("#retailstatusyes").hide();
$("#retailstatusno").hide();
} else {
$("#noaccess").hide();
$("#investor-type").show();
$("#prostatus").hide();
$("#retailstatusyes").hide();
$("#retailstatusno").hide();
}
});
// Grab value from previous select menu for comparison
$('#investor-type').on('change', function() {
var selected = $("#purpose option:selected").val();
console.log(selected+" "+this.value);
if ( this.value == '1') {
$("#prostatus").show();
} else if ( this.value == "2") {
$("#retailstatusno").show();
$("#prostatus").hide();
// Not working. Show specific success div if the current value is 2 and value from previous select is 5
} else if ( this.value == "2" && selected == "5") {
$("#retailstatusyes").show();
$("#prostatus").hide();
} else {
$("#noaccess").hide();
$("#prostatus").hide();
$("#retailstatusyes").hide();
$("#retailstatusno").hide();
}
});
https://jsfiddle.net/Lvbj2dmm/9/
First, you need to move the evaluation of selected into the event handler to get the up-to-date value:
$('#investor-type').on('change', function() {
var selected = $("#purpose option:selected").val();
// ...
}
Secondly, the order of your else if is wrong because the first (this.value == "2") will render the next (this.value == "2" && selected == "5") useless. Try to change their order so that the most specific one will come first:
if (this.value == '1') {
$("#prostatus").show();
} else if (this.value == "2" && selected == "5") {
$("#retailstatusyes").show();
$("#prostatus").hide();
} else if (this.value == "2") {
$("#retailstatusno").show();
$("#prostatus").hide();
} else {
$("#noaccess").hide();
$("#prostatus").hide();
$("#retailstatusyes").hide();
$("#retailstatusno").hide();
}
See modified Fiddle
I want to know if it is possible to hit an event if the period sign . is removed from textbox.
for example I have a textbox#Quantity which takes numeric values as input with period sign
and i have a drop down control#unitValue which have three option
I had successfully hit an event on period sign . key press as follows
$("#Quantity").keypress(function(e) {
if(e.which == 46) {
//successfully disabled Gram in Unit
}
});
Now I want to enable "Gram" option in the drop down if the period sign . is removed from the textbox.
I have an idea but don't if it is right to do so.
Idea is:-
On any key press add each letter to an array, Then on backspace key press, I check if the letter on the array index is period sign . or not if it is the . sign then enable the "Gram"
Any help will be Appreciated
Thank you
JS Fiddle - updated -using .prop() instead
// attach the functionality on multi events
$('#inpt').on('keypress input change', function() {
var Gram = $('#slct').children('[value="1"]');
// if the indexOf "." is > -1, then there's a dot
if ($(this).val().indexOf('.') > -1) {
// disable the Gram option
Gram.prop('disabled', true);
// ====================== this part was added by #SarathChandra
// reset the drop down if Gram option was selected
if ($('#slct').val() === "1" || $('#slct').val() === null) {
$('#slct').val("0");
}
// ====================== #SarathChandra Thank you for the improvement
} else {
// if it the dot was removed, we set the disabled prop to false
Gram.prop('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input id="inpt" type="text">
<select id="slct">
<option value="0">- select -</option>
<option value="1">Gram</option>
<option value="2">Kilo</option>
<option value="3">Quntal</option>
</select>
EDIT: Thanks to #SarathChandra added these couple lines:
if($('#slct').val() == "1" || $('#slct').val() == null){
$('#slct').val("0");
}
To fix it when the entered value doesn't contain a ., and Gram was selected THEN period was add, it resets the dropdown.
JsFiddle Demo
You could use this.
$(document).on('keyup paste', '#Quantity', function() {
if ($(this).val().indexOf('.') > -1) {
// disable the Gram option
$('#Unit').children('[value="1"]').prop('disabled', true);
} else{
$('#Unit').children('[value="1"]').prop('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input id="Quantity" type="text">
<select id="Unit">
<option value="0">- select -</option>
<option value="1">Gram</option>
<option value="2">Kilo</option>
<option value="3">Quntal</option>
</select>
I would suggest storing the previous entered text and compare it to the actual text in the Input:
...
var prevText = "";
$("#Quantity").keypress(function(e) {
var actualText = $(e.target).text();
if (this.prevText.indexOf(".") !== -1 && actualText.indexOf(".") === -1) {
// deleted
}
this.prevText = actualText;
});
...