dmhall0 Posted July 14, 2012 Share Posted July 14, 2012 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! Quote Link to comment https://forums.phpfreaks.com/topic/265670-javascript-sumadd-time-dropdown-input-fields/ Share on other sites More sharing options...
nogray Posted July 14, 2012 Share Posted July 14, 2012 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. Quote Link to comment https://forums.phpfreaks.com/topic/265670-javascript-sumadd-time-dropdown-input-fields/#findComment-1361528 Share on other sites More sharing options...
dmhall0 Posted July 15, 2012 Author Share Posted July 15, 2012 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. Quote Link to comment https://forums.phpfreaks.com/topic/265670-javascript-sumadd-time-dropdown-input-fields/#findComment-1361577 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.