jquery多个函数调用文本框焦点计算总计，折扣，预付金额，到期金额

Question

如何从两个文本框计算总价。我还想在折扣后设置总计，并且要在设置高级金额后显示到期金额。我想在文本框焦点上进行运行时计算。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

在输入元素上添加keyup和focusout事件，并根据折扣，提前等计算值。以下是您更新的工作代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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;
	    var val = $('#total').text();
        $('.discount').each(function() {
            if (!isNaN(this.value) && this.value.length != 0) {
                sum -= parseFloat(this.value);
		
            }
        });
	val =  parseFloat(val) - parseFloat(sum);
    $('#gtotal').text(val);

});

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