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

只需定位<h2>代码，然后使用.text代替.val。

http://jsfiddle.net/LHn6X/

Answer 2

你可以这样做：

$( "div" ).text( output_total );

Answer 3

您可以使用total课程将h2指向总数，设置其text并将值格式化为货币。

代码：

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

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

Answer 4

要设置h2标记的值，您可以执行以下操作：

$(".total").innerText = "some value";

使用jQuery或JS在Div on blur中显示表单总数

4 个答案: