2つの入力値を加算して合計を表示

Question

開始時刻と終了時刻の2つの「時間」入力があります。

両方の入力が完了したら、私は自動的に開始と終了の間の合計を表示するには「合計」フィールドを希望しています（例えば8時間）

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

私は、このスクリプト（http://jsbin.com/emoziw/1/edit?html,js,output）は、次の試してみましたが、見えることはできませんそれを時間に変更する

Answer 1

この値はデフォルト値です。 あなたは（jQueryのを使用して）このような何かを実行する必要があります。changeイベントはform-controlクラスを持つ任意の要素でトリガさ

$(".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) 
}); 

この意志は、自動的に合計を更新します。

PS：

私は私があなたを助けしたいと思います（もちろん、デフォルト値のスメある）

EDIT

合計のホルダーにデフォルト値を置くことを提案します

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 
} 

/

：時間の計算、私は機能を作りました

EDIT 2：

したい場合は、のonchange EH関数ポインタ（したがって、あなたもイベントをトリガすることなく、関数を呼び出すことができます）に渡すことができます：あなたはそれゆえ

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

することができます持っている：

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

EDIT 3：

()=>{/*...*/}があります匿名の関数を宣言するためのES6の方法だけでは、あなたがそれに慣れていればfunction(){/*...*/}に置き換えることができます。

EDIT 4 通称RECAP：

あなたはこの答えの後に失われたビットであれば、ここにあなたのウェブサイトに追加する必要がある機能の要約です：入力をもと正規表現@@

処理@@

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

@@計算@@

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

@@イベント処理およびコール@@ Javaのタグを削除

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