Javascript Sum/Add Time Dropdown Input Fields

[dmhall0]

I have 3 input dropdown fields that show certain units of time.

I have another field (read-only) that I want to dynamically show the sum of those fields.

When the page is loaded I pull the saved times from the database.

At this point I want to auto-calculate the total time; and then if the user changes the values I want the total time to update.

 

Here is my html of the dropdown fields, which is selected, and the field I want the total to show in.

<tr class="train_day1">
<td>Monday</td>
<td>
    <select name="mon_1_time">
        <option value="01:30:00">01:30:00</option>
        <option value="02:00:00">02:00:00</option>
        <option selected="selected" value="02:30:00">02:30:00</option>
        <option value="03:00:00">03:00:00</option>
        <option value="03:30:00">03:30:00</option>
    </select>
</td>
<td>
    <select name="mon_2_time">
        <option value="01:30:00">01:30:00</option>
        <option selected="selected" value="02:00:00">02:00:00</option>
        <option value="02:30:00">02:30:00</option>
        <option value="03:00:00">03:00:00</option>
        <option value="03:30:00">03:30:00</option>
    </select>
</td>
<td>
    <select name="mon_3_time">
        <option value="01:30:00">01:30:00</option>
        <option value="02:00:00">02:00:00</option>
        <option value="02:30:00">02:30:00</option>
        <option value="03:00:00">03:00:00</option>
        <option selected="selected" value="03:30:00">03:30:00</option>
    </select>
</td>
<td>
<input id="mon_total" type="text" size="10" value="" name="mon_total">
</td>
</tr>

 

Here is my javascript function:

function training_times()
{
//set the variables 
  var mon_1_time = document.getElementById('mon_1_time');
  var mon_2_time = document.getElementById('mon_2_time');
  var mon_3_time = document.getElementById('mon_3_time');
  var mon_total = document.getElementById('mon_total');

  //calculate the results
  mon_total.value = (mon_1_time.options[mon_1_time.selectedIndex].value
	  + mon_2_time.options[mon_2_time.selectedIndex].value
	  + mon_3_time.options[mon_3_time.selectedIndex].value);
}

 

Here I call the function on page load:

<script type="text/javascript"> window.onload = training_times()</script>

 

I get the following error when I run the page:

"mon_1_time is null"

 

What am I doing wrong?

How do I properly format the time to add it and display again as hh:mm:ss?

 

Thanks!

[nogray]

You are using getElementById but your select elements don't have an id attribute. Second, you can't add the time as the format you use in the select values. You'll get three strings put togather instead of the total time. You might want to change the value into the minutes (as numbers) so you can add them togather.

[dmhall0]

I changed the value to minutes and added an ID to the dropdown; but am still getting the same error message saying value is null for the first field.