fooboy
07-14-2012, 03: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. :)
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. :)