jquery multiple function call on textbox focusout to calculate total, discount, advance amount, due amount

Question

How calculate total price from two textbox. I also want to set a grand total after discount, and want to show due amount after set advanced amount. I want run-time calculation on textbox focusout.

<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

Add keyup and focusout events on the input elements and calculate the values based on discounts, advance, etc. Below is the updated working code for you:

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