Javascript for generating month and year dropdowns

Question

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
if(window.addEventListener){
   window.addEventListener('load',setDay,false);
 }
else { 
if(window.attachEvent){
   window.attachEvent('onload',setDay);
  }
 }

function setDay(){

document.forms[0].elements['mes'].onchange=function() {
   n= parseFloat(this.getAttribute("label"))+1;
   opt=[];
   txt=[];
   $("#dia > option").remove();
for(c=1;c<n;c++) {  

   opt[c]=document.createElement('option');
   txt[c]=document.createTextNode(c);
   opt[c].value=c;
   opt[c].setAttribute('name', 'dias');
   opt[c].appendChild(txt[c]);
   document.forms[0].elements['dia'].appendChild(opt[c]);
   }
  }
 }
</script>
-----
<select name="mes">
 <option value="z">Mês</option>
 <option value="31" label="31">Janeiro</option>
 <option value="29" label="31">Fevereiro</option>
 <option value="31" label="31">Março</option>
 <option value="30" label="31">Abril</option>
 <option value="31" label="31">Maio</option>
 <option value="30" label="31">Junho</option>
 <option value="31" label="31">Julho</option>
 <option value="31" label="31">Agosto</option>
 <option value="30" label="31">Setembro</option>
 <option value="31" label="31">Outubro</option>
 <option value="30" label="31">Novembro</option>
 <option value="31" label="31">Dezembro</option>
</select>
<select name="dia" id="dia">
 <option value="z">Dia</option>
</select>

<select name="ano">
 <option>Ano</option>
 <option value="2010">2010</option>
 <option value="2009">2009</option>
 <option value="2008">2008</option>
 <option value="2007">2007</option>
 <option value="2006">2006</option>
 <option value="2005">2005</option>
 <option value="2004">2004</option>
 <option value="2003">2003</option>
 <option value="2002">2002</option>
 <option value="2001">2001</option>
 <option value="2000">2000</option>
 <option value="1999">1999</option>
 <option value="1998">1998</option>
 <option value="1997">1997</option>
 <option value="1996">1996</option>
 <option value="1995">1995</option>
 <option value="1994">1994</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>
</select>

---

So my problem is that I want to catch the values with PHP in a form using POST and I have a problem in catching the month value, because I wanted that month had their own value and not the value of the number of days that corresponds to that month. I changed this script a little bit, even made on thing better but now I'm stuck.

Can anyone help me? Thanks

Answer 1

Perhaps you could store in the value attribute the actual values you intend to send to the server, and have a JavaScript object/hash as a lookup table of month names to number of days.

Answer 2

Change your HTML code to this:

<select name="mes">
 <option value="z">Mês</option>
 <option value="1" label="31">Janeiro</option>
 <option value="2" label="31">Fevereiro</option>
 <option value="3" label="31">Março</option>
 ...
</select>

(or the month names as value, depending what you want).

Create lookup table in JavaScript:

var numberOfDays = {
    "1": 31,
    "2": 29,
    "3": 31
    ...
}

which contains the number of days for each month.

Then you do:

var n= numberOfDays[$(this).val()];
opt=[];
txt=[];
$("#dia > option").remove();
for(c=1;c<=n;c++) {
    //...
}

---

Side note: Always declare local variables with var!

Btw, if you use jQuery already, I would suggest to use it throughout the script. So e.g.

document.forms[0].elements['mes'].onchange=function() {...}

would become

$('select[name=mes]').change(function() {...});

And there is room for other improvements too ;)

Answer 3

if you want to get the name of the month , change your html to

 <option value="Janeiro" label="31">Janeiro</option>

Now you will get the month name

Keep an array in PHP with month name and value

like $montharraY with values $montharraY['january'][31]

So you have to check the value you get from JS with this PHP arary.

Answer 4

Why not like this: http://jsfiddle.net/McDP5/

var months = [
  {DaysInMonth:31, Name:"Janeiro"},
  {DaysInMonth:31, Name:"Fevereiro"},
  {DaysInMonth:31, Name:"Março"},
  {DaysInMonth:31, Name:"Abril"},
  {DaysInMonth:31, Name:"Maio"},
  {DaysInMonth:31, Name:"Junho"},
  {DaysInMonth:31, Name:"Julho"},
  {DaysInMonth:31, Name:"Agosto"},
  {DaysInMonth:31, Name:"Setembro"},
  {DaysInMonth:31, Name:"Outubro"},
  {DaysInMonth:31, Name:"Novembro"},
  {DaysInMonth:31, Name:"Dezembro"}
];
$(function() {
    var monthSelector = $('select[name=mes]');
    $.each(months, function(index,month) {
        $('<option></option>')
            .attr('label', month.Name)
            .attr('value', index)
            .html(month.DaysInMonth)
            .appendTo(monthSelector);
    });
    var yearSelector = $('select[name=ano]');
    for(var year=1970;year<=2010;year++)
        $('<option></option>')
            .attr('label', year)
            .attr('value', year)
            .html(year)
            .appendTo(yearSelector);            
});​

Or even better, a calendar control from the jQuery UI