0

I've been able to get this working GREAT when using a single textbox that has the HH:MM split with :, but when the HH are in a separate textbox from MM I'm completely lost. I'm needing to calculate time worked from the time entered and then outputted to the decimal format then minus the lunch. Any help would be awesome!

// adding military time
$(function () {
     function calculate () {
         var time1 = $("#element_33_1").val(), time1_1 = $("#element_33_2").val(), time2 = $("#element_34_1").val(), time2_1 = $("#element_34_2").val();
         var hours1 = (time1), 
             hours2 = (time2),
             mins1 = (time1_1),
             mins2 = (time2_1);
         var hours = hours2 - hours1, mins = 0;
         if(hours <= 0) hours = 0 + hours;
         if(mins2 >= mins1) {
             mins = mins2 - mins1;
         }
         else {
             mins = (mins2 + 60) - mins1;
             hours--;
         }
         mins = mins / 60; // take percentage in 60
         hours += mins;
         hours = hours.toFixed(2);
         $("#element_509").val(hours);
     }
     $("#element_33_1,#element_33_2,#element_34_1,#element_34_2").keyup(calculate);
     calculate();
 });
 
//Hours Billed Total        
$(document).ready(function() {
    $("#element_29,#element_509,#element_33_1,#element_33_2,#element_34_1,#element_34_2,#element_39").keyup(function(ev){
 var val1=parseFloat($("#element_509").val());
   var val2=parseFloat($("#element_39").val());
    $("#element_29").val((val1 - val2).toFixed(2));
     });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="li_33"  class="time_field column_4">
  <fieldset>
  <legend style="display: none">Start Time</legend>
  <span class="description">Start Time <span id="required_33" class="required">*</span></span>
  <span>
   <input id="element_33_1" name="element_33_1"  class="element text " size="2" type="text" maxlength="2" value="" /> 
   <label for="element_33_1">HH</label>
  </span>
  <span>
   <input id="element_33_2" name="element_33_2"  class="element text " size="2" type="text" maxlength="2" value="" />  
   <label for="element_33_2">MM</label>
  </span>
  
  
  </fieldset>
   
  </li>  <li id="li_39"  class="column_4 guidelines_bottom">
  <label class="description" for="element_39">Lunch Hour <span id="required_39" class="required">*</span></label>
  <div>
   <input id="element_39" name="element_39" class="element text medium"   type="text"   value=""  /> 
  </div> 
  </li>  <li id="li_34"  class="time_field column_4">
  <fieldset>
  <legend style="display: none">Stop Time</legend>
  <span class="description">Stop Time <span id="required_34" class="required">*</span></span>
  <span>
   <input id="element_34_1" name="element_34_1"  class="element text " size="2" type="text" maxlength="2" value="" />  
   <label for="element_34_1">HH</label>
  </span>
  <span>
   <input id="element_34_2" name="element_34_2"  class="element text " size="2" type="text" maxlength="2" value="" />  
   <label for="element_34_2">MM</label>
  </span>

  
  </fieldset>
     <input id="element_509" value="" name="Subtotal"/>
  </li>  <li id="li_29"  class="column_4">
  <label class="description" for="element_29">Hours Billed <span id="required_29" class="required">*</span></label>
  <div>
   <input id="element_29" name="element_29" class="element text medium"   type="text"  data-quantity_link="element_44" value=""  /> 
  </div>
agdm619
  • 23
  • 5
  • What exactly are you having trouble with? Why don't you convert to a common unit (minutes) before computing. – Jasen Nov 08 '17 at 18:30
  • It doesn't calculate right. If you try the snippet its not even close. I if make the start and stop time one textbox and split with : it works great. I'm really new at this and been looking up and researching but lack of understanding is my worst enemy right now. any help would be great. – agdm619 Nov 08 '17 at 18:34

1 Answers1

1

You definitely want to convert to a common unit (minutes) first. It looks like you're attempting that with:

mins = mins / 60

but that's not correct. {correction: it is technically correct, but you could potentially lose/gain time when converting back to your billing units. See the additional info below.}

You want something like:

var totalMinutes = mins + (hours * 60);

Also, fix the typo on line 7:

time2_1 = $("#element_33_2").val();

Should be:

time2_1 = $("#element_34_2").val();

Added: To hide the NaNs and negative values, you could test the vars before assigning to val and also clear previous results if there are errors:

var val3 = (val1 - val2).toFixed(2);
if (isNaN(val3) || val3 < 0)
{
    $("#element_29").val("");
}
else
{
    $("#element_29").val(val3);
}

I would still recommend working with minutes-as-integers rather than hours-as-floats. The comments on this question have some good info on time reporting.

Jon Wood
  • 11
  • 5