Add 2 input values and show total - html

Question

I have 2 'time' inputs for a start and end time.
When both inputs are completed I am wanting the 'total' field to automatically show the total between start and end (e.g 8 hours)
<input type='time' value="09:00" id="MondayStart" name='MondayStart' class='form-control'>
<input type='time' value="17:00" name='MondayEnd' id="MondayEnd" class='form-control'>
<input type="text" name="total">
I have tried following this script (http://jsbin.com/emoziw/1/edit?html,js,output) but cannot seem to change it to time

Answer 1

You have a default value so this is good.
You need to do something like this (using jQuery) :
$(".form-control").on('change', ()=>{
var $this = $(this);
var sum;
sum = /*do the sum calculation here*/;
$('input[name="total"]').eq(0).val(sum);
//if you put an id to the total then you can just use $(id here).val(sum)
});
This will, when the change event is triggered on any element having the form-control class, update the sum automatically.
PS:
I suggest to put a default value on the sum's holder (being of course the sume of the default values)
EDIT
I'd like to help you with the time calculation, so I made functions :
function doCalc($jq){//pass in the jqSelection that gets the two input
var $beg = $jq.eq(0);//first element with this class
var $end = $jq.eq(1);//second element with this class
var beg_t = {
h: getH($beg),
m: getM($beg)
}
var end_t = {
h: getH($end),
m: getM($end)
}
var elapsed = {
h: end_t.h - beg_t.h,
m: end_t.m - beg_t.m
}
return ""+elapsed.h+":"+elapsed.m;//so it can be used with what's above
}
/
function getH($t){
var str = $t.val();
return str.replace(/(\d{2}):(\d{2})/,"$1");
}
function getM($t){
var str = $t.val();
return str.replace(/(\d{2}:(\d{2})/,"$2");
}
EDIT 2:
If you want you can pass to the onchange EH a function pointer (therefore you can also call the function without having to trigger the event) :
function updateSum(){
var $this = $(".form-control");
var sum;
sum = doCalc($this);
$('input[name="total"]').eq(0).val(sum);
//if you put an id to the total then you can just use $(id here).val(sum)
}
therefore you can have :
$(document).ready(()=>{
updateSum();
$(".form-control").on('change', updateSum);
});
EDIT 3:
()=>{/*...*/} is just the ES6 way to declare an anonymous function, you can replace them with function(){/*...*/} if you're more comfortable with it.
EDIT 4 aka RECAP :
If you're a bit lost after this answer, here's a recap of the functions you need to add to your website :
##Regex based input processing##
function getH($t){
var str = $t.val();
return str.replace(/(\d{2}):(\d{2})/,"$1");
}
function getM($t){
var str = $t.val();
return str.replace(/(\d{2}:(\d{2})/,"$2");
}
##Calculation##
function doCalc($jq){//pass in the jqSelection that gets the two input
var $beg = $jq.eq(0);//first element with this class
var $end = $jq.eq(1);//second element with this class
var beg_t = {
h: getH($beg),
m: getM($beg)
}
var end_t = {
h: getH($end),
m: getM($end)
}
var elapsed = {
h: end_t.h - beg_t.h,
m: end_t.m - beg_t.m
}
return ""+elapsed.h+":"+elapsed.m;//so it can be used with what's above
}
##Update function##
function updateSum(){
var $this = $(".form-control");
var sum;
sum = doCalc($this);
$('input[name="total"]').eq(0).val(sum);
//if you put an id to the total then you can just use $(id here).val(sum)
}
##Event Handling and Call##
$(document).ready(function(){
updateSum();
$(".form-control").on('change', updateSum);
});