How to get age based on month/day/year dropdown in FireFox - javascript

I am trying to get the age of users based on the month date and year field they enter in the dropdown. This is working in Chrome and other browsers but in Firefox I get an Invalid Date Error:
jQuery('#cons_birth_date_YEAR,#cons_birth_date_MONTH,#cons_birth_date_DAY').on('change',function(){
var selectedYear=$('#cons_birth_date_YEAR').find('option:selected').val();
var selectedDay=$('#cons_birth_date_DAY').find('option:selected').val();
var selectedMonth=$('#cons_birth_date_MONTH').find('option:selected').val();
if(selectedYear!=0 && selectedMonth!=0 && selectedDay!=0)
{
var today = new Date();
var dob=new Date(selectedDay+"/"+selectedMonth+"/"+selectedYear);
console.log(dob);
var age = new Date(today - dob).getFullYear() -1970;
$("#age").val(age);
}
if (age < 13) {
alert('under 13');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
<legend>
<span class="aural-only cons_dob"></span>
<span class="input-label survey-question-label cons_dob">Date of Birth:</span>
</legend>
<span class="input-container">
<span id="cons_birth_date_date" title="Date:">
<select name="cons_birth_date_MONTH" id="cons_birth_date_MONTH" title="Month">
<option value="0">Month
</option>
<option value="1" selected="selected">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">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="cons_birth_date_DAY" id="cons_birth_date_DAY" title="Day">
<option value="0">Day
</option>
<option value="1">1</option>
<option value="2" selected="selected">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>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="cons_birth_date_YEAR" id="cons_birth_date_YEAR" title="Year">
<option value="0">Year
</option>
<option value="1997" selected="selected">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>
</span>
</span>
</fieldset>
This script adds an alert if a user is under 13 years of age. This works in Chrome but in Firefox, the line below is returning the error: Invalid Date
var dob=new Date(selectedDay+"/"+selectedMonth+"/"+selectedYear);


Try with this:
var dateSTR = "2019-07-02";
var dob = new Date(dateSTR.replace(/-/g,"/"));
You can read this and check the crossbrowsing problems.

Related

Age in years from select tag dropdowns?

I'm doing a small project for work, and I created a small HTML text file. Looking to parse the given date of birth from dropdown menus into an age that I can then run through a control flow.
I've created the dropdown lists to select the date of birth using the <select> tag, then option values. Afterwards added a submit button using the <input type="submit">
I'm trying to do this without using any external libraries or frameworks.
How can I get the person's age in only years?

it's not exactly and i suggest you to use a library but here is a proximation:
function calcAge() {
let day = document.getElementById('day').value;
let month = document.getElementById('month').value;
let year = document.getElementById('year').value;
let birthday = new Date(year, month, day);
document.getElementById('result').innerHTML = ~~(((Date.now() - birthday) / (31557600000)));
}
<label id="date_of_birth">Date of Birth:<br />
<select class="first" name="date_of_birth:day" tabindex="7" id="day">
<option value="">
<!-- -->
</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">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>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="date_of_birth:mon" tabindex="8" id="month">
<option value="">
<!-- -->
</option>
<option value="01">Jan</option>
<option value="02">Feb</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="date_of_birth:year" tabindex="9" id="year">
<option value="">
<!-- -->
</option>
<option value="1920">1920</option>
<option value="1921">1921</option>
<option value="1922">1922</option>
<option value="1923">1923</option>
<option value="1924">1924</option>
<option value="1925">1925</option>
<option value="1926">1926</option>
<option value="1927">1927</option>
<option value="1928">1928</option>
<option value="1929">1929</option>
<option value="1930">1930</option>
<option value="1931">1931</option>
<option value="1932">1932</option>
<option value="1933">1933</option>
<option value="1934">1934</option>
<option value="1935">1935</option>
<option value="1936">1936</option>
<option value="1937">1937</option>
<option value="1938">1938</option>
<option value="1939">1939</option>
<option value="1940">1940</option>
<option value="1941">1941</option>
<option value="1942">1942</option>
<option value="1943">1943</option>
<option value="1944">1944</option>
<option value="1945">1945</option>
<option value="1946">1946</option>
<option value="1947">1947</option>
<option value="1948">1948</option>
<option value="1949">1949</option>
<option value="1950">1950</option>
<option value="1951">1951</option>
<option value="1952">1952</option>
<option value="1953">1953</option>
<option value="1954">1954</option>
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
</select>
</label>
<button onclick="calcAge()">
calculate
</button>
<br>
<div id="result" text="asdaaa">
</div>

What are the steps to make this dob calculator work ? JavaScript

Hey i'm doing a homework on how to make a dob calculator on JavaScript. I'm a beginner by the way. This exercice is about calculating age based on 3 select and then i display it with an alert() i need some of you to help me on what to do on JavaScript.
I create some variable to get the values of these select but it doesn't work as i expected. I don't know what are the steps make it functional
<form action="#" method="post">
<div class="field dob">
<label for="dob-day">Day:</label>
<select name="dob-day" id="dob-day">
<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>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="field dob">
<label for="dob-month">Month:</label>
<select name="dob-month" id="dob-month">
<option value="1">Janvier</option>
<option value="2">Février</option>
<option value="3">Mars</option>
<option value="4">Avrl</option>
<option value="5">Mai</option>
<option value="6">Juin</option>
<option value="7">Juillet</option>
<option value="8">Août</option>
<option value="9">Septembre</option>
<option value="10">Octobre</option>
<option value="11">Novembre</option>
<option value="12">Décembre</option>
</select>
</div>
<div class="field dob">
<label for="dob-year">Year:</label>
<select name="dob-year" id="dob-year">
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
</select>
</div>
<div class="actions">
<button type="button" id="run">Run</button>
</div>
</form>
Here's my code on JavaScript...
let now = new Date();
let day = document.getElementById("dob-day").value;
let month = document.getElementById("dob-month").value;
let year = document.getElementById("dob-year").value;
(function() {
document.getElementById("run").addEventListener("click", function(){
})
})();

YOu will not need an iife and get the value of day,month and year inside the click function.
Then using Date function convert the input to date and subtract from current date and get the number of days.
document.getElementById("run").addEventListener("click", function() {
let now = new Date();
let day = document.getElementById("dob-day").value;
let month = document.getElementById("dob-month").value;
let year = document.getElementById("dob-year").value;
var timeDiff = Math.abs((new Date(`${month}/${day}/${year}`)).getTime() - now.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
console.log(diffDays)
})
<form action="#" method="post">
<div class="field dob">
<label for="dob-day">Day:</label>
<select name="dob-day" id="dob-day">
<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>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="field dob">
<label for="dob-month">Month:</label>
<select name="dob-month" id="dob-month">
<option value="1">Janvier</option>
<option value="2">Février</option>
<option value="3">Mars</option>
<option value="4">Avrl</option>
<option value="5">Mai</option>
<option value="6">Juin</option>
<option value="7">Juillet</option>
<option value="8">Août</option>
<option value="9">Septembre</option>
<option value="10">Octobre</option>
<option value="11">Novembre</option>
<option value="12">Décembre</option>
</select>
</div>
<div class="field dob">
<label for="dob-year">Year:</label>
<select name="dob-year" id="dob-year">
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
</select>
</div>
<div class="actions">
<button type="button" id="run">Run</button>
</div>
</form>

DOB menu that opens in middle of list with overflow shown - Age restricted

I am looking for a solution to create a scrollable DOB selector menu (one for month/day/and year) that opens in the middle of the list with the date current year - 18, using HTML, CSS, JS, jQuery, or bootstrap. I have been struggling to find a solution that allows a menu to open in the middle options with the top overflow still visible. I've seen some solutions to get the current year - 18 but none with the middle opening.
I'm starting to question if this is even possible and only an option with year select menu for the iPhone.
Rough idea on what I am looking to do
I'm also interested in hearing any alternative ideas you guys would have to have a quicker and more accessible way to have users input their DOB's, maybe something like the IOS Date picker but a desktop alternative.
What I have so far, basic DOB dropdown
<select name="DOBMonth">
<option> - Month - </option>
<option value="January">January</option>
<option value="Febuary">Febuary</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="DOBDay">
<option>Day</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>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="DOBYear">
<option>Year</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
</select>
</div>
</body>`
Thank you!

How to combine values from three different fields and set it to the hidden field only when all the three fields are filled with values?

I've six fields on a form for showing the start time and end time in Hour: Minutes AM/PM format as follows :
<div class="block-time-term" style="padding-bottom:10px;">
<label>Starts at :</label>
<select name="hours_start" id="hours_start">
<option value="">hh</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>
</select>
<select name="minutes_start" id="minutes_start">
<option value="">mm</option>
<option value="0">00</option>
<option value="5">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
<select name="am_pm_start" id="am_pm_start">
<option value="AM">AM</option>
<option value="PM">PM</option>
</select>
<br><br>
<label>Ends at :</label>
<select name="hours_end" id="hours_end">
<option value="">hh</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>
</select>
<select name="minutes_end" id="minutes_end">
<option value="">mm</option>
<option value="0">00</option>
<option value="5">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
<select name="am_pm_end" id="am_pm_end">
<option value="AM">AM</option>
<option value="PM">PM</option>
</select>
</div>
Now there are two hidden fields present on the form as follows :
<input type="hidden" name="val[start_time]" id="start_time" value=""/>
<input type="hidden" name="val[end_time]" id="end_time" value=""/>
Now what I want to do is when user selects all the values from the respective drop downs only then the selected values should get combined and should be stored in respecive hidden fields.
For example if user selects Start Time as follows 2 from Hour, 30 from Minutes and PM then the string to be formed and to be stored should be 02:35 PM. Same should be applicable to end date.
If anything is missing proper alert message should appear. How should I achieve this using jQuery/Javascript?
Thanks.

I have created a JSFiddle for you. I made the hidden text boxes visible for you to check the output. It's better to replace the alert messages with a DIV in production. Hope this helps.
http://jsfiddle.net/su8898/m5r140cy/4/

how do update the options in an html form based on what year it is?

i'm trying to set up a webpage with a form that asks for soemone to fill in a year with a drop down, but i also want it to change based on what year it is, ie: it is now 2014 so i want to show 2014, 2015, 2016, 2017, 2018. in 2015 it would show 2015, 2016, 2017, 2018, 2019.
i have the following html code that i use for the form
<td valign="top">
<select name="month" id="month">
<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="day" id="day">
<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>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="year" id="year">
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
<label>
<input type="radio" name="Date" value="firm" id="Date0" />
firm</label>
<label>
<input type="radio" name="Date" value="flexible" id="Date1" />
flexible</label>
</td>`
and i was thinking to use javascript to update it with something like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var selOptions = [
['2014','2014','2015','2016','2017','2018'],
['2015','2015','2016','2017','2018','2019'],
['2016','2016','2017','2018','2019','2020'],
['2017','2017','2018','2019','2020','2021'],
['2018','2018','2019','2020','2021','2022'],
['2019','2019','2020','2021','2022','2023'],
['2020','2020','2021','2022','2023','2024'],
['2021','2021','2022','2023','2024','2025']
];
function setSel2Options(obj){
oSel2.options.length = 0;
if(obj.selectedIndex == 0){return;}
for(i=0; i < selOptions.length; i++){
if(obj.value == selOptions[i][0]){
oSel2.options[oSel2.options.length] = new Option('Select a year','',false,false);
for(j=1; j < selOptions[i].length; j++){
oSel2.options[oSel2.options.length] = new Option(selOptions[i][j],selOptions[i][j],false,false);
}
i = selOptions.length;
}
}
}
window.onload=function(){
oSel1 = document.getElementById('sel1');
oSel2 = document.getElementById('sel2');
oSel1.options[oSel1.options.length] = new Option('Select an option','',false,false);
for(i=0; i < selOptions.length; i++){
oSel1.options[oSel1.options.length] = new Option(selOptions[i][0],selOptions[i][0], false,false);
}
oSel1.onchange=function(){setSel2Options(this);}
}
</script>
</head>
<body>
<select id="sel1"></select>
<select id="sel2"></select>
</body>
</html>
Is this actually possible?

Categories