CTN 162

HTML forms, interacting with the user, part three

Notes from May 20, 2005 class

Today in class we mostly discussed the new "Mad Coder" assignment, and reviewed the homework from Wednesday, which was to try to get the date comparison script on page 222-223 of our textbook to work.

The date comparison script

The script in the book had an error that interferes with its ability to function. Kudos to Dia for being the first to identify and fix it.

There's a working example of the date comparison script here. The code, and the identified problem and solution, are below.

<!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><title>Date comparison</title>
<script language="JavaScript" type="text/JavaScript">

function writeOptions(startNumber, endNumber)
{

var optionCounter;

for (optionCounter = startNumber; optionCounter <= endNumber; optionCounter++)

{

document.write('<option value=' + optionCounter + '>' + optionCounter);

}

}

function writeMonthOptions()
{

var theMonth;
var monthCounter;

/* The book has the following line:
var theDate = new Date(1)
new Date(1) doesn't work, though. I don't know why they're suggesting we pass a parameter to the script. I suggest we just leave that parameter out, then the script seems to work fine. */

var theDate = new Date();

for (monthCounter = 0; monthCounter < 12; monthCounter++)
{

theDate.setMonth(monthCounter);
theMonth = theDate.toString();

theMonth = theMonth.substr(4,3);
document.write('<option value=' + theMonth + '>' + theMonth);

}

}

function recalcDateDiff()

{

var myForm = document.form1;

var firstDay = myForm.firstDay.options[myForm.firstDay.selectedIndex].value;

var secondDay =
myForm.secondDay.options[myForm.secondDay.selectedIndex].value;

var firstMonth =
myForm.firstMonth.options[myForm.firstMonth.selectedIndex].value;

var secondMonth =
myForm.secondMonth.options[myForm.secondMonth.selectedIndex].value;

var firstYear =
myForm.firstYear.options[myForm.firstYear.selectedIndex].value;

var secondYear =
myForm.secondYear.options[myForm.secondYear.selectedIndex].value;

var firstDate = new Date(firstDay + " " + firstMonth + " " + firstYear);

var secondDate = new Date(secondDay + " " + secondMonth + " " + secondYear);

var daysDiff = (secondDate.valueOf() - firstDate.valueOf());

daysDiff = Math.floor(Math.abs((((daysDiff / 1000) / 60) / 60) / 24));

myForm.txtDays.value = daysDiff;

return true;

}

function window_onload()

{

var theForm = document.form1;

var nowDate = new Date();

theForm.firstDay.options[nowDate.getDate() - 1].selected = true;

theForm.secondDay.options[nowDate.getDate() - 1].selected = true;

theForm.firstMonth.options[nowDate.getMonth()].selected = true;

theForm.secondMonth.options[nowDate.getMonth()].selected = true;

theForm.firstYear.options[nowDate.getFullYear()- 1970].selected = true;

theForm.secondYear.options[nowDate.getFullYear() - 1970].selected = true;

}

</script>
</head>

<body language="JavaScript" onload="return window_onload()">

<form name="form1">

<p>First date<br />

<select name="firstDay" size="1" onchange="return recalcDateDiff()">

<script language="JavaScript">

writeOptions(1,31);

</script>

</select>

<select name="firstMonth" size="1" onchange="return recalcDateDiff()">

<script language="JavaScript">

writeMonthOptions();

</script>

</select>

<select name="firstYear" size="1" onchange="return recalcDateDiff()">

<script language="JavaScript">

writeOptions(1970,2010);

</script>

</select>

</p>

<p>Second Date<br / >

<select name="secondDay" size="1" onchange="return recalcDateDiff()">

<script language="JavaScript">

writeOptions(1,31);

</script>

</select>

<select name="secondMonth" size="1" onchange="return recalcDateDiff()">

<script language="JavaScript">

writeMonthOptions();

</script>

</select>

<select name="secondYear" size="1" onchange="return recalcDateDiff()">

<script language=JavaScript>

writeOptions(1970,2010);

</script>

</select>

</p>

Total difference in days
<input type="text" name="txtDays" value="0" />

</form>
</body >
</html>