Javascript two datepicker conflict - javascript

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

Related

change the sum after the change in the select field

This is my first post after having come to the forum for years ;)
My problem is that if the "wybierz-diete" changes, the sum value does not change
HTML:
<select id="wybierz-diete">
<option value="fit">Fit</option>
<option value="sport">Sport</option>
<option value="economy">Economy</option>
</select>
<div id="fit" class="fit wybranadieta">
ilość kalori:
<select id="ilosc-kalori1" onchange="calculateTotal()">
<option value="1200">1200</option>
<option value="1500">1500</option>
<option value="2000">2000</option>
</select>
jak długo?:
<select name="a1" id="a1" onchange="calculateTotal()">
<option value="f_a1" class="f_a1">1 dzien</option>
<option value="f_a20" class="f_a20">20 dni</option>
<option value="f_a30" class="f_a30">30 dni</option>
<option value="f_b1" class="f_b1">1 dzien</option>
<option value="f_b20" class="f_b20">20 dni</option>
<option value="f_b30" class="f_b30">30 dni</option>
<option value="f_c1" class="f_c1">1 dzien</option>
<option value="f_c20" class="f_c20">20 dni</option>
<option value="f_c30" class="f_c30">30 dni</option>
</select>
</div>
JavaScript:
var fit_a= new Array();
fit_a["f_a1"]=42;
fit_a["f_a20"]=800;
fit_a["f_a30"]=1200;
fit_a["f_b1"]=45;
fit_a["f_b20"]=870;
fit_a["f_b30"]=1300;
fit_a["f_c1"]=48;
fit_a["f_c20"]=940;
fit_a["f_c30"]=1400;
function podliczAfit() {
var podliczAfit=0;
var theForm = document.forms["dieta"];
var selecteda1 = theForm.elements["a1"];
podliczAfit = fit_a[selecteda1.value];
return podliczAfit;
}
function calculateTotal() {
var kosztDiety = podliczAfit();
var divobj = document.getElementById('kosztCalosci');
divobj.style.display='block';
divobj.innerHTML = "Twoje zamówienie wyniesie: $"+kosztDiety;
}
I know that when I will have a solution, I will already have another problem. For example, how to manage when choosing the next diet, a sport, for which I have not written any code yet.

disable select option based on a variable value

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);
}
})
})

javascript - get selected value from select list

i got a form with a select form elements for month.
<select id="month" name="month">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option>Mar
<option>Apr
<option>May
<option>Jun
<option>Jul
<option>Aug
<option>Sept
<option>Oct
<option>Nov
<option>Dec
</select>
How do i use javascript to get compare the selected value. for example if i select Feb, the javascript will pop up "you selected feb"
var monthSelect = document.getElementById("month")
var opt = monthSelect.options[monthSelect.selectedIndex]
if(opt.text == "Feb")
{
alert("Feb selected")
return false
}

JSFiddle: https://jsfiddle.net/ebrnh047/
Your html:
<select id="month">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
</select>
Try:
var month = document.getElementById("month");
month.onchange = function() {
if (month.value == "Feb") {
alert("Feb selected");
}
}

This is a way to do it with JavaScript only:
First, your HTML:
<select id="month" name="month">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="Jun">Jun</option>
<option value="Jul">Jul</option>
<option value="Aug">Aug</option>
<option value="Sep">Sep</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
Then, your script:
var monthSelect = document.getElementById("month");
monthSelect.onchange = function(){
var thisValue = this.value;
alert(thisValue);
};
This is the fiddle: https://jsfiddle.net/16sn90tp/

Make sure you execute this code on document ready event( window.onload )
var monthSelect = document.getElementById("month")
monthSelect.onchange = function() {
var opt = monthSelect.options[monthSelect.selectedIndex]
if (opt.text == "Feb") {
alert("Feb selected")
}
}
<select id="month" name="month">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option>Mar
<option>Apr
<option>May
<option>Jun
<option>Jul
<option>Aug
<option>Sept
<option>Oct
<option>Nov
<option>Dec
</select>

Jan Feb
function myFunction() {
var monthSelect = document.getElementById("month").value;
if (monthSelect == "Feb") {
alert("Feb selected");
return false;
}
}
<select id="month" name="month" onchange="myFunction()">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
</select>

Hi add at first a class called "month" to all of your option tags and one class "monthList" to the select like for example this:
<select class="monthList">
<option class="month">Jan</option>
<option class="month">Feb</option>
<option class="month">Mar</option>
...
</select>
After this you need a little bit of JQuery:
$(".monthList .month").click(function(){
var selectedMonth = $(this).text();
var showText = "you selected " + selectedMonth;
alert(showText);
});
Try this, it should work.

How do you add an eventlistener to a select element

<!DOCTYPE html>
<html>
<head>
<title>NYC MTA</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<p>Line N</p>
Dropdown Button
<select id ="Select">
<option id="Select">Times Square</option>
<option id="34th">34th</option>
<option id="28th">28th</option>
<option id="23th">23th</option>
<option id="23th">Union Square</option>
<option id="8th">8th</option>
</select>
<select>
<option id="Times Square">Times Square</option>
<option id="34t">34th</option>
<option id="28t">28th</option>
<option id="23t">23th</option>
<option id="23t">Union Square</option>
<option id="8t">8th</option>
</select>
</body>
<script type="text/javascript" src="index.js"></script>
</html>
<script>
window.onload= function(){
var lnListeners = function(){
var ln = document.getElementById("Select");
if(ln){
ln.addEventListener('change', function(){alert("Do great stuff")});
}
lnListeners();
}
};
</script>

id="Select" should only be in the <select> element, not the <option> element. IDs have to be unique.
And you need to call lnListeners outside the definition of the function.
window.onload = function() {
var lnListeners = function() {
var ln = document.getElementById("Select");
if (ln) {
ln.addEventListener('change', function() {
alert("Do great stuff")
});
}
};
lnListeners();
};
<select id="Select">
<option id="Times Square">Times Square</option>
<option id="34th">34th</option>
<option id="28th">28th</option>
<option id="23th">23th</option>
<option id="23th">Union Square</option>
<option id="8th">8th</option>
</select>

In your case, you just have to call the function lnListeners(), outside its scope.
var lnListeners = function(){
var ln = document.getElementById("Select");
if(ln){
ln.addEventListener('change', function(){alert("Do great stuff")});
}
}
lnListeners();
<select id ="Select">
<option id="Select">Times Square</option>
<option id="34th">34th</option>
<option id="28th">28th</option>
<option id="23th">23th</option>
<option id="23th">Union Square</option>
<option id="8th">8th</option>
</select>
<select>
<option id="Times Square">Times Square</option>
<option id="34t">34th</option>
<option id="28t">28th</option>
<option id="23t">23th</option>
<option id="23t">Union Square</option>
<option id="8t">8th</option>
</select>

Month selection dropdown in HTML and JavaScript

I have 2 drop downs in HTML both representing months. So I want a validation like following.
If I select the first drop down month as April, then the next drop-down menu should start from the month April. If the first one is changed to June then the second should change to June.
<div id="head2" style="width:15%;float:right;margin-left:5px;">
<select id='gMonth2' onchange="show_month()">
<option value=''>--Select Month--</option>
<option selected value='1'>Janaury</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>
</div>
<div id="head1" style="width:15%;float:right;margin-left:5px;">
<select id='gMonth1'>
<option value=''>--Select Month--</option>
<option selected value='1'>Janaury</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>
</div>
The function will be:
function show_month()
{
//
}
How should I write that function?

Easy with jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script>
$(function(){
$('#gMonth2').change(function(){
var month = $(this).val();
$('#gMonth1').val(month);
});
});
</script>
and skip the onChange event in the first select...
Working example here: http://jsfiddle.net/sCnEZ/1/

Your JS function could be like this:
function show_month(obj) {
document.getElementById('gMonth1').selectedIndex = obj.selectedIndex;
}
You should change onchange="show_month()" with onchange="show_month(this)"
Check out this jsfiddle

Categories

Resources