Question

PopUp视图代码

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

这是我的视图代码，我需要grndttlAmt为文本框值添加amountfdtlspop，fineAmt，waivedAmt，schShipAmt，以便在用户输入值时动态或自动添加。如何在Jquery中实现此功能吗

总计=金额+优惠金额+豁免金额+学者船

Answer 1

你应该使用document.getElementById（'id'）。value来获取textbox的值。你的代码应该是：

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;

Answer 2

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

Answer 3

我意识到这是一个老线程并且有一个已接受的答案，但我遇到了一些问题 - 如果一个字段是空的，并且想要显示2个小数位（美元金额），则获得“NaN”

以下是对已接受答案的修改： http://jsfiddle.net/platypusman/NKccZ/3/

我通过Google发现了这个问题，所以希望其他人可能会觉得这很有用。

弹出窗口中的多个文本框值的Jquery动态加法/减法/乘法/除法

3 个答案: