...

View Full Version : Dynamic day drop-down list (depending on the year and month)



fooboy
07-14-2012, 04:05 PM
Hi. I'm new to JavaScript and I'm trying to create a sample registration form. One of the task is to display a drop-down menu of days depending on the month and year entered in the preceding fields. Obviously, the number of days in each month and year (only during February) differ.

So I browsed for online solutions and found this: http://javascript.about.com/library/bldateselect.htm

The sample in the site worked perfectly, but it didn't in my case. I included the JavaScript at the bottom of the day menu, as it indicated. The difference between my work and the one in that page is that I populated the year and months by also using JavaScript. I'm not certain if that will have a different outcome from having the fields outside the <script> tag.

Here's the code snippet of my work:


<body>
<form action="process.html" method="post" enctype="multipart/form-data" name="registrationform" id="registrationform" onLoad="populateMonth()">

<img src="banner.gif">
<br />

<table class="outer" width = 650 height = 100>
<th>
<tr>
<th width="160" scope="col" class="right">Birthdate</th>
<th width="240" scope="col" class="left">
<script type="text/javascript">
var codeYear = "";
codeYear += "<select id='birthYear'>";
codeYear += "<option value='--'>- Year -</option>"

for(var i = 2012; i >= 1900; i--)
codeYear += "<option value='" + i + "' >" + i + "</option>";

codeYear += "</select>";
document.write(codeYear);
</script>
</th>
</tr>

<tr>
<th width="160" scope="col" class="right"></th>
<th width="240" scope="col" class="left">
<script type="text/javascript">
var month = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September",
"October", "November", "December");
var codeMonth = "";
codeMonth += "<select id='birthMonth' >";
codeMonth += "<option value='--'>- Month -</option>"

for(var i = 0; i <= 11; i++)
codeMonth += "<option value='" + (i + 1) + "' >" + month[i] + "</option>";

codeMonth += "</select>";
document.write(codeMonth);
</script>
</th>
</tr>

<tr>
<th width="160" scope="col"></th>
<th width="240" scope="col" class="left">
<script type="text/javascript">
var codeDay = "";
codeDay += "<select id='birthDay'>";
codeDay += "<option value='--'>- Day -</option>"

for(var i = 1; i <= 31; i++)
codeDay += "<option value='" + i + "' >" + i + "</option>";

codeDay += "</select>";
document.write(codeDay);
</script>
</th>
</tr>

<script type="text/javascript">
function daysInMonth(month,year) {
var dd = new Date(year, month, 0);
return dd.getDate();
}
function setDayDrop(dyear, dmonth, dday) {
var year = dyear.options[dyear.selectedIndex].value;
var month = dmonth.options[dmonth.selectedIndex].value;
var day = dday.options[dday.selectedIndex].value;
if (day == ' ') {
var days = (year == ' ' || month == ' ') ? 31 : daysInMonth(month,year);
dday.options.length = 0;
dday.options[dday.options.length] = new Option(' ',' ');
for (var i = 1; i <= days; i++)
dday.options[dday.options.length] = new Option(i,i);
}
}
function setDay() {
var year = document.getElementById('birthYear');
var month = document.getElementById('birthMonth');
var day = document.getElementById('birthDay');
setDayDrop(year,month,day);
}
document.getElementById('birthYear').onchange = setDay;
document.getElementById('birthMonth').onchange = setDay;
</script>
</th>
</table>
</form>
</body>


BTW, I used <table>, <tr>, and <th> tags for the layout.

So, why is the JavaScript for dynamic days not working? What part of the code can I tweak to get results the same with that in the site above? Is there a way to fix it without doing away with the JavaScript for populating year and month values? Thanks in advance for any form of help. :)

Philip M
07-14-2012, 05:36 PM
You could try this instead:-




<html>
<head>

<script type="text/javascript">
// populate the years select list
var codeYear = "";
codeYear += "<select id='year1' onchange=\"SelDate('day1','month1','year1');\">";
codeYear += "<option value='--'>- Year -</option>"
for (var i = 2012; i >= 1900; i--) {
codeYear += "<option value='" + i + "' >" + i + "</option>";
}
codeYear += "</select>";
document.write(codeYear);

function SelDate(d,m,y) {
var dy=document.getElementById(d);
var mth=document.getElementById(m);
var yr=document.getElementById(y);
dy.options.length=1;
if (mth.value && yr.value) {
var days=new Date(yr.value,mth.value,1,-1).getDate(); // the first day of the next month minus 1 hour
for (var i=1; i<=days; i++){
dy.options[i] = new Option(i,i,true,true);
}
dy.selectedIndex = 0;
}
}
</script>
</head>

<body>

<select id="month1" onchange="SelDate('day1','month1','year1');">
<option >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="day1" >
<option >Day</option>
</select>
</body>

</html>

Quizmaster: What was the name of the Queen in the Victorian era?
Contestant: er.. Elizabeth?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum