d2jsp
Log InRegister
d2jsp Forums > Off-Topic > Computers & IT > Programming & Development > Help Me Find My Error Please > Html/jquery
Add Reply New Topic New Poll
Member
Posts: 7,026
Joined: Apr 3 2008
Gold: 1.00
Feb 11 2013 03:08pm
Okay so I want to update the number of days (in a drop down list) in the month depending on what month the user chooses. Ex: Feb 2000 --> 29 days, Feb 1999 --> 28 days, Aug --> 31 days, etc.

This is my HTML code:
Code
<div class="formitem">
     <label>Birthday:</label>
     <select id="year" name="year">
      <option value="-1">Year</option>
      <option value="1900">1900</option>
      <option value="1901">1901</option>
      <option value="1902">1902</option>
      <option value="1903">1903</option>
      <option value="1904">1904</option>
      <option value="1905">1905</option>
      <option value="1906">1906</option>
      <option value="1907">1907</option>
      <option value="1908">1908</option>
      <option value="1909">1909</option>
      <option value="1910">1910</option>
      <option value="1911">1911</option>
      <option value="1912">1912</option>
      <option value="1913">1913</option>
      <option value="1914">1914</option>
      <option value="1915">1915</option>
      <option value="1916">1916</option>
      <option value="1917">1917</option>
      <option value="1918">1918</option>
      <option value="1919">1919</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>
      <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>
      <option value="2006">2006</option>
      <option value="2007">2007</option>
      <option value="2008">2008</option>
      <option value="2009">2009</option>
      <option value="2010">2010</option>
      <option value="2011">2011</option>
      <option value="2012">2012</option>
      <option value="2013">2013</option>
     </select>
     <select id="month" name="month">
        <option value="-1">Month</option>
        <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">Sep</option>
        <option value="10">Oct</option>
        <option value="11">Nov</option>
        <option value="12">Dec</option>
       </select>
       <select id="day" name="day">
        <option value="-1">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>
       </select>
      </div>


And this is my jQuery code:
Code
function appendDays () {
 var yearSelected=$("#year").val();
 var monthSelected=$("#month").val();
 var o = new Option("29", "29");
 var p = new Option("30", "30");
 var q = new Option("31", "31");
$(o).html("29");
$(p).html("30");
$(q).html("31");
$("#day").append(o);

//The following lines verify if the month is a 31 days month
 if (monthSelected.value==1||3||5||7||8||10||12) {
  $("#day").append(o);
  $("#day").append(p);
  $("#day").append(q);
 };

//The following lines verify if the month is February AND if the year is a leap year
 else if ((monthSelected.value==2)&&
    (((yearSelected%4==0)&&(yearSelected%100!=0))||((yearSelected%4==0)&&(yearSelected%100==0)&&(yearSelected%400==0)))){
  $("#day").append(o);};

//The following lines verify if the month is a 30 days month
 else if (monthSelected.value==4||6||9||11){$("#day").append(o);
 $("#day").append(p);};


This code shows a part of my <head></head> section in the .html file:
Code
<script src="functions.js"></script>
<script>
$("#month").blur(function appendDays);
</script>


The problem is that the days just don't append if I change the month, or the year. I've tried many other solutions but I ran out of ideas... I'm still pretty new to jQuery so thanks for helping, I really appreciate it :)

This post was edited by bail6002 on Feb 11 2013 03:12pm
Member
Posts: 2,478
Joined: Jan 4 2007
Gold: 7,545.00
Feb 12 2013 07:43am
Change your head code so it looks like this:

Code
$("#month").blur(appendDays());


That is the proper way to call another function :)
Member
Posts: 4,582
Joined: Nov 24 2003
Gold: 9,950.00
Feb 12 2013 10:13am
Actually, if you're trying to fire the function on the months drop down, it's probably better to use .change()

Also, this is how you'll have to pass the function using jQuery.

Code

$("#month").change(function(){
   appendDays();
});
Member
Posts: 568
Joined: Jan 17 2007
Gold: 0.00
Feb 27 2013 01:13am
Also you could generate all the options using JavaScript

Code
<select id="year" name="year">
 <option value="-1">Year</option>
</select>


Code
$(function() {
 var yearSelect = $("#year");
 for(var i = 1900; i < 2014; i++) {
   yearSelect.append('<option value="'+i+'">'+i+'</option>');
 }
});
Go Back To Programming & Development Topic List
Add Reply New Topic New Poll