You are viewing limited content. For full access, please sign in.

Question

Question

hours and minutes on single line field

asked on June 24, 2022

Hi all,

I am currently using 2 single line fields for keeping time on subjects spoken about and 1 single field line for the total of the 2.   I am tracking hours and minutes for each.  my problem is attempting to add the fields together for a total. this is the script I found somewhere:

$(document).ready(function () {
$('.sum').on('blur', 'input', sumtotal);
function sumtotal() {
var s = 0;
$('.sum input').each(function () {
s += parseNumber($(this).val());
});
$('.total input').val(s);
}
function parseNumber(n) {
var f = parseFloat(n); //Convert to float number.
return isNaN(f) ? 0 : f; //treat invalid input as 0;
}
});

in the CSS of the two fields I put "sum" and in the total field I put "total".  So if I enter 01:30 in one field and 00:30 in the other all I get in the total is 0 when I should get 2:00. This is what I use for Regular expression for validation on all of the lines:

I tried the time field but it doesn't do what I need.

If anyone can make sense of this and would help me, I would greatly appreciate it.

Donnie

0 0

Answer

SELECTED ANSWER
replied on June 24, 2022

Give this code a try: 

$(document).ready(function () {

  //When any field with the sum class changes, call the sumtotal function.
  $('.sum input').change(sumtotal);
  
  //Sumtotal function.  Gathers all of the field with the sum class,
  //and splits their values (assumed format 00:00) into hours and minutes.
  //All the time is added together and posted into the field with
  //the total class.
  function sumtotal() {
    var h = 0;
    var m = 0;
    $('.sum input').each(function () {
      if($(this).val() != '') {
        h = h + parseInt($(this).val().substring(0,3));
        m = m + parseInt($(this).val().substring(3,5));
      }
    });
    h = h + Math.floor(m / 60);
    m = m % 60;
    $('.total input').val(pad(h, 2) + ":" + pad(m, 2));
  }
  
  //Function to pad numbers with leading zeros.
  function pad(num, size) {
    num = num.toString();
    while (num.length < size) num = "0" + num;
    return num;
}
  
});

 

1 0
replied on June 27, 2022

Matthew,

that works perfectly!  Thanks so much for the help!

1 0
replied on June 27, 2022

Fantastic!  So glad it worked for you.

Only thing to keep in mind is that it is very dependant on that 00:00 format, so if any user manages to get around that, it could result in weird behavior.

0 0
replied on June 27, 2022

I will remember that, thank you sir!

1 0

Replies

replied on June 24, 2022

Unfortunately, JavaScript doesn't have very good native support for dates and times.  A potentially more robust solution (but still not perfect) could be to create a JavaScript Date object (for an arbitrary date/time), duplicate it, add each time to one of the Date objects, and then subtract one Date from the other Date. 

1 0
You are not allowed to follow up in this post.

Sign in to reply to this post.