populating forms with Javascript [Archive]

Sinister Solski

01-25-2008, 08:27 PM

I'm trying to create a simple birthDate form. Depending on the month selected, it will populate the days field. Then once the day is selected it will populate the years field.

Here is my problem:
I want the years to start @ 2008 and end @ 1900. But I cant get the count to stop at 1900, it will go right down to 1. Can someone take a look at my populateYears() function and see where I have gone wrong?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Form</title>
<script type="text/javascript">
window.onload = startForm;

function startForm()
{
document.getElementById("months").selectedIndex = 0;
document.getElementById("months").onchange = populateDays;
document.getElementById("days").onchange = populateYears;
}

function populateDays()
{
var monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var monthStr = this.options[this.selectedIndex].value;

if(monthStr != "")
{
var theMonth = parseInt(monthStr);

document.getElementById("days").options.length = 0;
for(var i=0; i<monthDays[theMonth]; i++)
{
document.getElementById("days").options[i] = new Option(i+1);
}
}
}

function populateYears()
{
var maxYear = 2008;
var minYear = 1900;
var yearStr = this.options[this.selectedIndex].value;

if(yearStr != "")
{
var theYear = parseInt(yearStr);

document.getElementById("years").options.length = 0;
for(var i=0; i<maxYear; i++)
{
document.getElementById("years").options[i] = new Option(maxYear - i);
}
}
}
</script>
</head>

<body>
<form action="#">
<select id="months">
<option value="">Month</option>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
 
<select id="days">
<option>Day</option>
</select>
 
<select id="years">
<option>Year</option>
</select>
</form>
</body>
</html>

Sinister Solski

01-25-2008, 09:31 PM

I figured out my own problem. I created a variable called maxFields and set it to 100. Then in my for statement I used:

for(var i=0; i<maxFields; i++)

and presto!!!!! I only have 100 years to choose from.

Hopefully I'll have some questions I can't figure out in the future. lol

A1ien51

01-25-2008, 09:39 PM

Well there might be one little problem with your code, leap years.

Eric

Sinister Solski

01-25-2008, 09:53 PM

funny you mention that. because just before I read that I changed the days of February to 29.

it would be nice to figure out on the fly if the year selected is a leap year. But I think to do that I would need the user to select the year before the month. Would that be correct? Then calculate if the year is divisible by 4 to be a leap year. then populate 29 days insted of 28.

I'm new to this site as of today. I've noticed your name on a lot of posts. I look forward to recieving your help in the future.

cheers