Jump to content

Recommended Posts

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!

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.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.