Fügen Sie 2 Eingabewerte hinzu und zeigen Sie Gesamt

Question

Ich habe 2 'Zeit' Eingänge für eine Start- und Endzeit.

Wenn beiden Eingänge abgeschlossen sind ich das ‚total‘ bin zu wollen Feld automatisch die Gesamt zwischen Anfang und Ende zeigen (zB 8 Stunden)

<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"> 

Ich habe nach diesem Skript versucht (http://jsbin.com/emoziw/1/edit?html,js,output), aber kann nicht scheinen, um es in die Zeit zu ändern

Answer 1

Sie haben einen Standardwert, also ist das gut. Sie brauchen so etwas wie dies zu tun (mit 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) 
}); 

Dies wird, wenn das change Ereignis auf ein beliebiges Element ausgelöst wird, mit der form-control Klasse, automatisch die Summe aktualisieren.

PS:

Ich schlage vor, einen Standardwert auf die Summe des Inhabers zu setzen (wobei natürlich die sume der Standardwerte)

EDIT

Ich mag würden Sie mit dem helfen, Zeitberechnung, also machte ich Funktionen:

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:

Wenn Sie möchten, dass Sie auf die Onchange passieren kann EH ein Funktionszeiger (daher können Sie die Funktion auch aufrufen, ohne das Ereignis auszulösen zu haben):

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) 
} 

daher können Sie haben:

$(document).ready(()=>{ 
    updateSum(); 
    $(".form-control").on('change', updateSum); 
}); 

EDIT 3:

()=>{/*...*/} ist nur die ES6-Methode, um eine anonyme Funktion zu deklarieren, können Sie sie durch function(){/*...*/} ersetzen, wenn Sie damit vertrauter sind.

EDIT 4 aka REKAPITULATION:

Wenn Sie ein wenig verloren, nachdem dieser Antwort sind, ist hier eine kurze Zusammenfassung der Funktionen müssen Sie Ihre Website hinzu:

@@ Regex basierte Eingabe Verarbeitung @@

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-Funktion @@

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) 
} 

@@ Ereignisbehandlung und Anruf @@

$(document).ready(function(){ 
    updateSum(); 
    $(".form-control").on('change', updateSum); 
});