2 개의 입력 값을 더하고 합계 표시

기본값이 있으므로 이것은 좋습니다. 다음과 같은 작업을 수행해야합니다 (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)
});

클래스가 change있는 요소 에서 이벤트가 트리거 form-control되면 합계가 자동으로 업데이트됩니다.

추신:

나는 합계의 소유자에 기본값을 넣는 것이 좋습니다 (물론 기본값의 합계)

편집하다

시간 계산을 도와 드리고 싶어서 함수를 만들었습니다.

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

편집 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);
});

편집 3 :

()=>{/*...*/}익명 함수를 선언하는 ES6 방식 일 뿐이며, function(){/*...*/}더 편하면 대체 할 수 있습니다 .

4 일명 요약 수정 :

이 답변을 잃어버린 경우 웹 사이트에 추가해야하는 기능을 요약하면 다음과 같습니다.

@@ Regex 기반 입력 처리 @@

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
}

@@ 업데이트 기능 @@

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

@@ 이벤트 처리 및 Call @@

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