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>