I have two select option in my code. First one selects the date and second one selects time. I want that If user selects today's date from select option 1, some time options from select option 2 should be disabled.
For ex. If user selects today's date(15), 6.00.00 time should be disabled. Again tomorrow if user will select 16, 6.00.00 time should be disabled. this should go on.
This is my code-
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
</head>
<body>
<select name="time" id = "put_time">
<option value="Select Time">Select Time</option>
<option value="6.00.00" id = "t1">6.00.00</option>
<option value="6.30.00" id = "t2">6.30.00</option>
<option value="7.00.00" id = "t3">7.00.00</option>
<option value="7.30.00" id = "t4">7.30.00</option>
</select>
<select name="date" id = "put_date">
<option value="Select date" >Select Date</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
<script>
var today = new Date();
if(document.getElementById('put_date') == today.getDate())
{
document.getElementById("t1").disabled = true;
}
else{
document.getElementById("t1").disabled = false;
};
</script>
</body>
</html>
But I am not getting desired result. Someone please guide me how to achieve this?
Thanks.
document.getElementById('put_date') == today.getDate() is not a valid statement, you should compare the value of the element (document.getElementById('put_date').value). I also invoke the function on change, because on init the value of the second select is empty (not really empty, it's equal to "Select date"):
function onChange() {
var today = new Date();
if (document.getElementById('put_date').value == today.getDate()) {
document.getElementById("t1").disabled = true;
} else {
document.getElementById("t1").disabled = false;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="time" id = "put_time">
<option value="Select Time">Select Time</option>
<option value="6.00.00" id = "t1">6.00.00</option>
<option value="6.30.00" id = "t2">6.30.00</option>
<option value="7.00.00" id = "t3">7.00.00</option>
<option value="7.30.00" id = "t4">7.30.00</option>
</select>
<select name="date" id = "put_date" onchange="onChange()">
<option value="Select date">Select Date</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
You can do this like below.
$(document).ready(function(){
$('#put_date').change(function(){
var d = new Date();
var n = d.getDate();
if($(this).val() == n){
$('#t1').prop('disabled',true);
}
})
})
Related
<select>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sept</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
I have the list of the month and they have numeric value to represent month number. I need to Mar to be selected by typing 3 on keyboard when it is focused.
Now I have to type "m" to select Mar or first letter of any month to select that month.
You can have a look at the fiddle here : https://jsfiddle.net/tn0gL34h/1/
check this i have modified ahmad's answer little bit, this will work for 2 digits also. source
var typingTimer;
var doneTypingInterval = 1000;
var $input = $('select');
var keys = '';
$input.on('keyup', function (e) {
keys += parseInt(e.key);
console.log(keys);
clearTimeout(typingTimer);
typingTimer = setTimeout(doneTyping, doneTypingInterval);
});
//on keydown, clear the countdown
$input.on('keydown', function () {
clearTimeout(typingTimer);
});
//user is "finished typing," do something
function doneTyping () {
if(keys != ''){
//do something
$input.val(parseInt(keys));
keys='';
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sept</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
For months from January to September, the following code will work, because they all require a single keystroke.
For the others, Month 10, 11, and 12, you will have to select manually.
$('select').on('keyup',function(e){
// this will only work for Jan --> Sep
// becuase Oct --> Dec require two digits
$(this).val(parseInt(e.key));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sept</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
As far as I know, the only reliable way to do this would be to use a javacript select menu replacement plugin. The techniques for capturing keypresses while a select is focused work on some browsers but not others (see more discussion on this here: keydown event in drop down list). In fact, though others have mentioned it works for them, Ahmad's answer above does not work on my browser (Chrome 49 / OS X 10.8).
Here is an example of how you could do this with a modified matcher method using Select2:
$('select').select2({
matcher: function(params, data) {
if ($.trim(params.term) === '') {
return data;
} else if (data.id.indexOf(params.term) === 0) {
// this is where the magic happens
// we return options where search input matches
// the beginning of the value
return data;
} else {
return null;
}
}
});
select {
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sept</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
I have this issue: In my form there are 4 dropdownlist and when the 1st (category1) or 2nd (software1) dropdown list is selected, the 3th (category2) and 4th (software2) must be disabled.
For this issue I find this script at disable-second-dropdown-if-the-first-is-not-selected but I do not trust to modify this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
category1
<select name='cat1'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software1
<select name='soft1'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
<br />
category2
<select name='cat2'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software2
<select name='soft2'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
<script type="text/javascript">
var setEnabled = function(e) {
var name = this.name.replace(/1/, '2'); //get name for second drop down
$('select[name=' + name + ']')
.prop('disabled', 0 === this.selectedIndex) // disable if selected option is first one
};
$(function() {
$('select[name=cat1], select[name=soft1]')
.on('change', setEnabled)
.trigger('change'); // trigger on page load
});
</script>
How to modify this?
Thanks
I think the main thing you want is to flip === for !==
However, to get this working on a matrix, where both top inputs trigger enabling/disabling of both bottom inputs, you'll need to test both on change of either.
var setEnabled = function(e) {
var selected = $('select[name=cat1]').prop('selectedIndex') > 0 || $('select[name=soft1]').prop('selectedIndex') > 0;
$('select[name=cat2], select[name=soft2]').prop('disabled', selected); // disable if selected option is first one
if (selected) {
$('select[name=cat2], select[name=soft2]').prop('selectedIndex', 0)
}
};
$(function() {
$('select[name=cat1], select[name=soft1]')
.on('change', setEnabled)
.trigger('change'); // trigger on page load
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</script>
category1
<select name='cat1'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software1
<select name='soft1'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
<br />
category2
<select name='cat2'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software2
<select name='soft2'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
HTML
<select id="my-select" multiple="multiple" size="8" style="width:200px">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
JQUERY
$('#my-select option').on('click',function(){
var count = $('#my-select').find('option:selected').length;
$('#dg').html(count);
if(count>10){
$(this).attr('selected',false);
alert('limit 10');
}
});
http://jsfiddle.net/LxNMm/
When you click on the options, calculate count of selected options and limit it to 10, but if you click on the options with pressing shift key and select a range, selection could be greater than 10. How can a detect count of selected options when select a range with pressing shift key
You can try updating the values this way:
$('#my-select').on('change', function () {
var count = $(this).find('option:selected').length;
$('#dg').html(count);
if (count > 10) {
$('option:gt(9)', this).attr('selected', false);
count = $(this).find('option:selected').length;
$('#dg').html(count);
alert('error');
}
});
Your updated demo fiddle
Don't use the click event of the <option />s but the change event of the <select />
$('#my-select').on('change', function () {
var count = $(this).find('option:selected').length;
$('#dg').html(count);
if (count > 10) {
$(this).find("option").prop('selected', false);
alert('error');
}
})
fiddle
I have problem with disabling some value from option field. I try to disable all the values who is less than value from another div field. My code looks like this:
<div id="cur-hour">09</div>
<select id="time_to_hour" class="select">
<option value="">---</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
And I have this js code:
$(function(){
if($("#time_from_hour > option").val() < $("#cur-hour").val()) {
$('#time_from_hour > option').prop('disabled', true);
}
});
But it didn't work - here is jsfiddle: http://jsfiddle.net/qhPp7/36/
$(function(){
var n=parseInt($("#cur-hour").html());
$("#time_to_hour option").each(function(){
if(parseInt($(this).val()) < n ) {
$(this).prop('disabled', true);
}
});
});
http://jsfiddle.net/qhPp7/38/
Your condition won't work because the value of option tag is a string.
Also val() is not used for divs, so instead use .html() or .text()
Also it has to parsed as integer
try this
$(function(){
var options = document.getElementById('time_to_hour').options;
var chk = document.getElementById('cur-hour').innerHTML;
for(var o=0;o< options.length;o++)
{
var va = parseInt(options[o].value);
if(va!="" && va<chk)
{
alert(va);
options[o].disabled=true;
}
}
});
Kindly use span to store the value it makes easier to find it.
09
$(function(){
$('#time_to_hour option').each(function () {
if (parseInt($("#index").text()) > parseInt($(this).text())) {
this.disabled = true;
}
});
});
I hope above code will work out for you...
Here is the working example from your fiddle http://jsfiddle.net/qhPp7/35/
Here is my code complete code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Date Picker</title>
</head>
<body>
<strong>Departing:</strong><br/>
<select name='dateSingleMonthDeparting' onChange='changeDate(this.options[selectedIndex].value);'>
<option value='na'>Month</option>
<option value='1'>January</option>
<option value='2'>February</option>
<option value='3'>March</option>
<option value='4'>April</option>
<option value='5'>May</option>
<option value='6'>June</option>
<option value='7'>July</option>
<option value='8'>August</option>
<option value='9'>September</option>
<option value='10'>October</option>
<option value='11'>November</option>
<option value='12'>December</option>
</select>
<select name='dateSingleDayDeparting' id='day'>
<option value='na'>Day</option>
</select>
<select name='dateSingleYearDeparting' id='year'>
<option value='na'>Year</option>
</select><br/>
<strong>Returning:</strong><br/>
<select name='dateSingleMonthReturning' onChange='changeDate(this.options[selectedIndex].value);'>
<option value='na'>Month</option>
<option value='1'>January</option>
<option value='2'>February</option>
<option value='3'>March</option>
<option value='4'>April</option>
<option value='5'>May</option>
<option value='6'>June</option>
<option value='7'>July</option>
<option value='8'>August</option>
<option value='9'>September</option>
<option value='10'>October</option>
<option value='11'>November</option>
<option value='12'>December</option>
</select>
<select name='dateSingleDayReturning' id='day'>
<option value='na'>Day</option>
</select>
<select name='dateSingleYearReturning' id='year'>
<option value='na'>Year</option>
</select>
<script>
function changeDate(i){
var e = document.getElementById('day');
while(e.length>0){
e.remove(e.length-1);
var j=-1;
if(i=="na"){
k=0;
}else if(i==2){
k=28;
}else if(i==4||i==6||i==9||i==11){
k=30;
}else{
k=31;
}
}
while(j++<k){
var s=document.createElement('option');
var e=document.getElementById('day');
if(j==0){
s.text="Day";
s.value="na";
try{
e.add(s,null);
}catch(ex){
e.add(s);
}
}
else{
s.text=j;
s.value=j;
try{
e.add(s,null);
}catch(ex){
e.add(s);
}
}
}
}
var currentTime = new Date();
y = currentTime.getFullYear()+1;
while (y-->1909){
var s = document.createElement('option');
var e = document.getElementById('year');
s.text=y;
s.value=y;
try{
e.add(s,null);
}catch(ex){
e.add(s);
}
}
</script>
</body>
</html>
I have two datepickers. When I change the first one it works perfectly, but if I change the second one the functions will work in the first datepciker
I want them to have their own function for each datepicker. What will I do to make this happen? I already tried to make put something like this getElementById('day day2') but it doesn't work.
Your select have assigned the ids day and year twice in your markup. That is wrong. ID should be unique.
Please change those IDs to day1, year1, day2 and year2. Then pass those ids as parameters into the function like this changeDate(this.value, "day1", "year1") and this changeDate(this.value, "day2", "year2").
Now define changeDate as
function changeDate(i, day, year) {
var e = document.getElementById( day ); // please note that day is the variable passed
...................
}
As an unrelated side note, this.options[selectedIndex].value is same as this.value