Select lists and time totals

I have a set of selects for a from hour, From minute, From Meridiem, To Hour, To Minute, To Meridiem.

What I would liek to do is take the times selected in the six selects and figure out the total time between them and display it on the screen.

so if someone selects 9:00am to 12:00pm the total time will be 3hrs. If they change their selections, I want this figure to update as well.

here is the layout of this html…I just need some direction on what JS functions to use to figure out the duration between the two times.

[code]
<form name=event>
<table width=500 align=center border=0>
<tr>
<td colspan=3 align=center>
<hr>
<b>1st Shift</b>
</td>
</tr>
<tr>
<td align=”right”>
Work From:
</td>
<td width=200>
<select name=”from_hour”>”;

for ($i = 1; $i <= 12; $i++)
{
//set a default of 8 am
if ($i == 8)
$value .= “<option value=””.$i.”” selected>”.$i.”</option>”;

if ($i <> 8)
$value .= “<option value=””.$i.””>”.$i.”</option>”;
}

$value .= “</select>
<select name=”from_min”>
<option value=”00″ selected>:00</option>
<option value=”15″>:15</option>
<option value=”30″>:30</option>
<option value=”45″>:45</option>
</select>
<select name=”from_merid”>
<option value=”AM” selected>am</option>
<option value=”PM”>pm</option>

</select>
</td>
</tr>
<tr>
<td align=”right”>
Work To :
</td>
<td>
<select name=”to_hour”>”;

for ($i = 1; $i <= 12; $i++)
{
$value .= “<option value=””.$i.”” >”.$i.”</option>”;
}

$value .= “</select>
<select name=”to_min”>
<option value=”00″>:00</option>
<option value=”15″>:15</option>
<option value=”30″>:30</option>
<option value=”45″>:45</option>
</select>
<select name=”to_merid”>
<option value=”AM”>am</option>
<option value=”PM”>pm</option>

</select>
</td>
</tr>
</table>
</form>[/code]

Thank you for any help with this.

Also in #JavaScript _↴