javascript - 使用 jQuery 或 JS 在模糊时显示 Div 中表单的总计

Question

有一个简单的表单，我用它来将输入添加在一起。在模糊时，我将输入添加并显示在另一个输入字段中。我想要的是在 div 或 h1 标签中显示总计，而不是另一个输入字段，并且表单中没有提交按钮将其发送到另一个表示层。有什么想法吗？

JS:

$( document ).ready(function() {
$(function() {
$("body").on("blur", "#vehiclePrice,#estimatedTaxesAndFees,#downPayment,#manufacturerRebate,#tradeInValue,#amtOwedOnTrade,#extendedWarranty,#gapInsurance,#serviceContract", function () {
updateTotal();
});
 var updateTotal = function () {
var input1 = parseInt($('#vehiclePrice').val()) || 0;
var input2 = parseInt($('#estimatedTaxesAndFees').val()) || 0;
var input3 = parseInt($('#downPayment').val()) || 0;
var input4 = parseInt($('#manufacturerRebate').val()) || 0;    
var input5 = parseInt($('#tradeInValue').val()) || 0;
var input6 = parseInt($('#amtOwedOnTrade').val()) || 0;    
var input7 = parseInt($('#extendedWarranty').val()) || 0;
var input8 = parseInt($('#gapInsurance').val()) || 0;
var input9 = parseInt($('#serviceContract').val()) || 0;           

        $('#total').val(input1 + input2 + input3 + input4 + input5 + input6 + input7 + input8 + input9 - 28435);
 };
var output_total = $('#total');

});

});

HTML:

              <label for="vehiclePrice" class="form-control-label vpl">Vehicle Price</label>
              <input type="number" class="form-control" id="vehiclePrice" placeholder="Vehicle Price" onkeypress="return isNumberKey(event)" />
              <label for="estimatedTaxesAndFees" class="form-control-label etfl">Estimated Taxes and Fees</label>
              <input type="number" class="form-control" id="estimatedTaxesAndFees" placeholder="Estimated Taxes and Fees" onkeypress="return isNumberKey(event)" />

            <form id="downPaymentForm">
                <label for="downPayment" class="form-control-label dpl">Down Payment</label>
                <input type="number" class="form-control" id="downPayment" placeholder="Down Payment" onkeypress="return isNumberKey(event)" />
                <label for="manufacturerRebate" class="form-control-label mrl">Manufacturer Rebate</label>
                <input type="number" class="form-control" id="manufacturerRebate" placeholder="Manufacturer Rebate" onkeypress="return isNumberKey(event)" />
                <label for="tradeInValue" class="form-control-label tivl">Trade-In Value</label>
                <input type="number" class="form-control" id="tradeInValue" placeholder="tradeInValue" onkeypress="return isNumberKey(event)" />
                <label for="amtOwedOnTrade" class="form-control-label aotl">Amt Owed on Trade</label>
                <input type="number" class="form-control" id="amtOwedOnTrade" placeholder="Amt Owed on Trade" onkeypress="return isNumberKey(event)" />

              <form id="protectionForm">
                <label for="extendedWarranty" class="form-control-label ewl">Extended Warranty</label>
                <input type="number" class="form-control" id="extendedWarranty" placeholder="Extended Warranty" onkeypress="return isNumberKey(event)" />

                <label for="gapInsurance" class="form-control-label gil">Gap Insurance</label>
                <input type="number" class="form-control" id="gapInsurance" placeholder="Gap Insurance" onkeypress="return isNumberKey(event)" />
                <label for="serviceContract" class="form-control-label scl">Service Contract</label>
                <input type="number" class="form-control" id="serviceContract" placeholder="Service Contract" onkeypress="return isNumberKey(event)" />
            </form>

              <h2 class="total">$28,435</h2>
              <input type="text" id="total" placeholder="$28,435">

Das Fiddle:

Answer 1

您可以使用 total 类将 h2 指向总计，设置其文本并将值格式化为货币。

代码:

$('.total').text('$'+sum.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));

演示:http://jsfiddle.net/W32Hg/3/