Jquery dynamic addition/subtraction/multiplication/division of multiple text box values in popup

Code of PopUp view

 <div class="inst_form_field">
 <div class="inst_form_Text"> Amount :     </div >
 <div class="inst_form_Textfield"> <input id="amountfdtlspop"  name="amountfdtlspop" value="0" type="text" size="20" />     </div >
 </div >

 <div class="inst_form_field">
 <div class="inst_form_Text"> Fine Amount :     </div >
 <div class="inst_form_Textfield"> <input name="fineAmt"  id="fineAmt" value="0"  type="text" size="20"/>     </div >
 </div >

 <div class="inst_form_field">
 <div class="inst_form_Text"> Waived Amount :     </div >
 <div class="inst_form_Textfield"> <input name="waivedAmt"  id="waivedAmt" value="0" type=开发者_如何学编程"text" size="20"/>     </div >
 </div >


 <div class="inst_form_field">
 <div class="inst_form_Text"> Scholar Ship :     </div >
 <div class="inst_form_Textfield"> <input name="schShipAmt"  id="schShipAmt" value="0" type="text" size="20"/>     </div >
 </div >

 <div class="inst_form_field">
 <div class="inst_form_Text"> Grand Total :     </div >
 <div class="inst_form_Textfield"> <input name="grndttlAmt" id="grndttlAmt" type="text"  value="0" size="23px;"/>     </div >
 </div >

This is my view code, I need the grndttlAmt to add for the text box values of amountfdtlspop,fineAmt,waivedAmt,schShipAmt to add dynamically or automatically when the user enters the value .How can i achieve this in Jquery?

Grand Total=Amount+Fine Amount+ Waived Amount+Scholar Ship

---

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('.qty').keyup(function() {   

      // Loop through all input's and re-calculate the total
      var total = 0;
      $('.qty').each(function(){
          total += parseInt(this.value, 10);
      });

      // Update the total
      $('#grndttlAmt').val(total);
  });
});
</script>
<div class="inst_form_field">
 <div class="inst_form_Text"> Amount :     </div >
 <div class="inst_form_Textfield"> <input id="amountfdtlspop" class="qty" name="amountfdtlspop" value="0" type="text" size="20" />     </div >
 </div >

 <div class="inst_form_field">
 <div class="inst_form_Text"> Fine Amount :     </div >
 <div class="inst_form_Textfield"> <input name="fineAmt" class="qty" id="fineAmt" value="0"  type="text" size="20"/>     </div >
 </div >

 <div class="inst_form_field">
 <div class="inst_form_Text"> Waived Amount :     </div >
 <div class="inst_form_Textfield"> <input name="waivedAmt" class="qty" id="waivedAmt" value="0" type="text" size="20"/>     </div >
 </div >


 <div class="inst_form_field">
 <div class="inst_form_Text"> Scholar Ship :     </div >
 <div class="inst_form_Textfield"> <input name="schShipAmt" class="qty" id="schShipAmt" value="0" type="text" size="20"/>     </div >
 </div >

 <div class="inst_form_field">
 <div class="inst_form_Text"> Grand Total :     </div >
 <div class="inst_form_Textfield"> <input name="grndttlAmt" id="grndttlAmt" type="text"  value="0" size="23px;"/>     </div >
 </div >

---

You should you document.getElementById('id').value to get value of textbox. Your code should be:

var amountfdtlspop = document.getElementById('amountfdtlspop').value;
var fineAmt = document.getElementById('fineAmt').value;
var waivedAmt = document.getElementById('waivedAmt').value;
var schShipAmt = document.getElementById('schShipAmt').value;
var grndttlAmt = document.getElementById('grndttlAmt');
grndttlAmt.value = amountfdtlspop + fineAmt + waivedAmt + schShipAmt;

---

I realize this is an old thread and there is an accepted answer, but I had a couple problems with it -- was getting "NaN" if a field was empty, and wanted to display 2 decimal places (for dollar amounts).

Here's a variation on the accepted answer: http://jsfiddle.net/platypusman/NKccZ/3/

I found this question via Google so hopefully someone else might find this useful.