Question

Time calculations in forms

Forms

Updated October 16, 2016

asked on October 19, 2015 • Show version history

I have a time sheet form and i need to calculate the total hours.

I'm using the 24 hour format to work out the total hours. which works ok, what i need to do is display the total as single digits or double digits , eg 4 or 12 hours is there a way to do this with JavaScript ?


 
    $(document).ready(function () {
    $('.cf-table-block').on('blur', 'input', sumtotal);
  function sumtotal() {
   		 var hour = 0;
         var rate = 0;
         var total = 0;
         var subtotal = 0;
    
    $('.cf-table-block tbody tr').each(function () {
      		hour = parseNumber($(this).find('.hour input').val());
      		rate = parseNumber($(this).find('.rate input').val());
      
      		subtotal = (hour - rate);
     
      		$(this).find('.total input').val(subtotal);
      		total += subtotal;
    });
    $('.Grandtotal input').val(total);
         
    } 
    function parseNumber(n) { 
       var f = parseFloat(n); //Convert to float number. 
  	return isNaN(f) ? 0 : f; //treat invalid input as 0; 
    } 


});

0 0

Answer

SELECTED ANSWER

replied on October 19, 2015 • Show version history

I'd recommend using external JS like moment.js for this. Then you can use the following code:

$(document).ready(function () {
  
  $.getScript('http://server/Forms/js/moment.js');
  
  $('.cf-table-block').on('blur', 'input', sumtotal);
  $(document).on('click', '.form-del-field', sumtotal);
  
  function sumtotal() {
    var hour = 0;
    var rate = 0;
    var total = 0;
    var subtotal = 0;   
    $('.cf-table-block tbody tr').each(function () {
      hour = moment($(this).find('.hour input').val(), 'HHmm');
      rate = moment($(this).find('.rate input').val(), 'HHmm');
      subtotal = hour.diff(rate, 'hours', true);
      $(this).find('.total input').val(subtotal.toFixed(2));
      total += subtotal;
    });  
    $('.Grandtotal input').val(total.toFixed(2));       
  }
  
  function parseNumber(n) { 
    var f = parseFloat(n); //Convert to float number. 
  	return isNaN(f) ? 0 : f; //treat invalid input as 0; 
  } 

});

Here's a sample form

If you need to use whole numbers for the difference in hours, then you can modify the JS based on your needs, i.e. floor, ceiling, round.

4 0

Replies

replied on October 16, 2016 • Show version history

I have been messing around with this script and wanted to share my findings:

Got the lunch time subtraction to work. It is important to get the proper format so that the subtraction would work correctly (hh:mm)
Curiously, the script only works properly once I comment out the line that calls the moment.js script.

I am still testing it but just wanted to share. Appreciate any input.

Thanks

$(document).ready(function () { 

   // $.getScript('http://yourservername/Forms/js/moment.js'); 

     

   $('.cf-table-block').on('blur', 'input', sumtotal); 

   $(document).on('click', '.form-del-field', sumtotal); 

     

   function sumtotal() { 

     var hour = 0; 

     var rate = 0;
     
     var lunch = 0;

     var total = 0; 

     var subtotal = 0;
     
     var subL = 0; 

     $('.cf-table-block tbody tr').each(function () { 

       hour = moment($(this).find('.hour input').val(), 'LT'); 

       rate = moment($(this).find('.rate input').val(), 'LT');
       
       lunch = moment($(this).find('.lunch input').val(), 'hh:mm');

       subL = hour.subtract(lunch, 'hh:mm');  
       
       subtotal = subL.diff(rate, 'hours', true);
       
       $(this).find('.total input').val(subtotal.toFixed(2)); 

       total += subtotal; 

     });   

     $('.Grandtotal input').val(total.toFixed(2));        

   } 

     

   function parseNumber(n) {  

     var f = parseFloat(n); //Convert to float number.  

     return isNaN(f) ? 0 : f; //treat invalid input as 0;  

   }  

   

 });

1 0

replied on October 19, 2015

Thanks heaps , that's awesome fast work

0 0

replied on October 10, 2016 • Show version history

Hi,

Has anybody worked on subtracting a lunch break from the subtotal. I am trying to modify this script with no success... needless to say that I have no experience with js...

I attempted the following:

 $(document).ready(function () { 

   $.getScript('http://yourservername/Forms/js/moment.js');    

   $('.cf-table-block').on('blur', 'input', sumtotal); 

   $(document).on('click', '.form-del-field', sumtotal); 
   
  
   function sumtotal() { 

     var hour = 0; 

     var rate = 0;
     
     var lunch = 0;
     
     var total = 0;

     var subtotal = 0;

     $('.cf-table-block tbody tr').each(function () { 

       hour = moment($(this).find('.hour input').val(), 'LT'); 

       rate = moment($(this).find('.rate input').val(), 'LT');
       
       lunch = moment($(this).find('.lunch input').val(), 'hours');
       
       subtotal = hour.diff(rate, 'hours', true) - lunch;
             
       $(this).find('.total input').val(subtotal.toFixed(2));
       
       total += subtotal;
       
     });   

     $('.Grandtotal input').val(total.toFixed(2));        

   } 

     

   function parseNumber(n) {  

     var f = parseFloat(n); //Convert to float number.  

     return isNaN(f) ? 0 : f; //treat invalid input as 0;  

   }  

   

 });

Subtracting lunch from the subtotal is not successful... If I substitute the var for a number it works. Any ideas about the right way of subtracting this using moment.js?

Thanks.

0 0

You are not allowed to follow up in this post.

Question

Question

Time calculations in forms

Answer

Replies

Sign in to reply to this post.