jQuery多重函數調用文本框焦點去計算總額，折扣，預付金額，到期金額

Question

如何從兩個文本框中計算總價格。我也想在折扣後設定總額，並且要在設定提前金額後顯示到期金額。我想要對文本框重點進行運行時計算。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-lg-3 form-group"> 
 
    <label>Frame</label> 
 
    <input type="text" name="frmamt" class="form-control price"> 
 
</div> 
 
<div class="col-lg-3 form-group"> 
 
    <label>Glass</label> 
 
    <input type="text" name="glsamt" class="form-control price"> 
 
</div> 
 
<div class="col-lg-3 form-group"> 
 
    <label>Total</label> 
 
    <input disabled type="text" name="totamt" id="total" class="form-control discount"> 
 
</div> 
 
<div class="col-lg-3 form-group"> 
 
    <label>Discount</label> 
 
    <input type="text" name="disamt" class="form-control discount"> 
 
</div> 
 
<div class="col-lg-3 form-group"> 
 
    <label>G-Total</label> 
 
    <input type="text" name="gtotal" id="gtotal" class="form-control"> 
 
</div> 
 
<div class="col-lg-3 form-group"> 
 
    <label>Advance</label> 
 
    <input type="text" name="advamt" class="form-control advanced"> 
 
</div> 
 
<div class="col-lg-3 form-group"> 
 
    <label>Due.</label> 
 
    <input type="text" name="dueamt" class="form-control due"> 
 
</div>

Answer 1

添加keyup和focusout事件輸入元素和計算基礎上的折扣，提前等在下面的數值就是你的更新的工作代碼：

$("#frame,#price").on('keyup', function() { 
 
    calculateTotal(); 
 
}); 
 

 
$(".discount").on('focusout', function() { 
 
    var gTotal = $(".total").val() - $(this).val(); 
 
    if (!isNaN(gTotal)) 
 
    $("#gtotal").val(gTotal); 
 
}); 
 

 
$(".advanced").on('focusout', function() { 
 
    var advance = $("#gtotal").val() - $(this).val(); 
 
    if (!isNaN(advance)) 
 
    $(".due").val(advance); 
 
}); 
 

 
function calculateTotal() { 
 
    var total = $("#frame").val() * $("#price").val(); 
 
    if (!isNaN(total)) 
 
    $(".total").val(total); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-lg-3 form-group"> 
 
    <label>Frame</label> 
 
    <input type="text" name="frmamt" class="form-control price" id="frame"> 
 
</div> 
 
<div class="col-lg-3 form-group"> 
 
    <label>Glass</label> 
 
    <input type="text" name="glsamt" class="form-control price" id="price"> 
 
</div> 
 
<div class="col-lg-3 form-group"> 
 
    <label>Total</label> 
 
    <input disabled type="text" name="totamt" id="total" class="form-control total"> 
 
</div> 
 
<div class="col-lg-3 form-group"> 
 
    <label>Discount</label> 
 
    <input type="text" name="disamt" class="form-control discount"> 
 
</div> 
 
<div class="col-lg-3 form-group"> 
 
    <label>G-Total</label> 
 
    <input type="text" name="gtotal" id="gtotal" class="form-control"> 
 
</div> 
 
<div class="col-lg-3 form-group"> 
 
    <label>Advance</label> 
 
    <input type="text" name="advamt" class="form-control advanced"> 
 
</div> 
 
<div class="col-lg-3 form-group"> 
 
    <label>Due.</label> 
 
    <input type="text" name="dueamt" class="form-control due"> 
 
</div>

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-lg-3 form-group"> 
 
    <label>Frame</label> 
 
    <input type="text" name="frmamt" class="form-control price"> 
 
</div> 
 
<div class="col-lg-3 form-group"> 
 
    <label>Glass</label> 
 
    <input type="text" name="glsamt" class="form-control price"> 
 
</div> 
 
<div class="col-lg-3 form-group"> 
 
    <label>Total</label> 
 
    <input disabled type="text" name="totamt" id="total" class="form-control discount"> 
 
</div> 
 
<div class="col-lg-3 form-group"> 
 
    <label>Discount</label> 
 
    <input type="text" name="disamt" class="form-control discount"> 
 
</div> 
 
<div class="col-lg-3 form-group"> 
 
    <label>G-Total</label> 
 
    <input type="text" name="gtotal" id="gtotal" class="form-control"> 
 
</div> 
 
<div class="col-lg-3 form-group"> 
 
    <label>Advance</label> 
 
    <input type="text" name="advamt" class="form-control advanced"> 
 
</div> 
 
<div class="col-lg-3 form-group"> 
 
    <label>Due.</label> 
 
    <input type="text" name="dueamt" class="form-control due"> 
 
</div>

$('.price').blur(function() { 
 
    var sum = 0; 
 
    $('.price').each(function() { 
 
     if($(this).val()!="") 
 
     { 
 
      sum += parseFloat($(this).val()); 
 
     } 
 

 
    }); 
 
     // alert(sum); 
 
     $("#total").val(sum); 
 
}); 
 
    
 

 
$('.discount').blur(function() { 
 
     var sum = 0; 
 
\t  var val = $('#total').text(); 
 
     $('.discount').each(function() { 
 
      if (!isNaN(this.value) && this.value.length != 0) { 
 
       sum -= parseFloat(this.value); 
 
\t \t 
 
      } 
 
     }); 
 
\t val = parseFloat(val) - parseFloat(sum); 
 
    $('#gtotal').text(val); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>