我正在开发Html表单，其中的值将使用jquery作为用户输入值进行更新。
当您在输入值字段中输入值时，它将立即更新价格字段中的价格
现在，我想添加所有字段的总和，这将是字段1，字段2，字段3，字段4，字段5和字段6，并显示在总量的总和，但所有字段的总计算没有更新总量。
HTML代码
<form action="" method="post">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<input type="text" class="form-control" name="fullname" placeholder="FUll Name">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<input type="email" class="form-control" name="email" placeholder="Your Email">
</div>
</div>
<div class="col-md-6">
<div class="mb-3 menier">
<h4>Iron Bark:</h4>
$210 Per Cubic Metre
<input type="number" id="ironbark" class="form-control" placeholder="Enter Your Value">
<div class="mt-3">
Price
<input id="ironbarvalue" type="text" name="ironbark" class="total-amount form-control" readonly>
</div>
</div>
</div>
<div class="col-md-6 ">
<div class="mb-3 menier">
<h4>Red Gum:</h4>
$200 Per Cubic Metre
<input type="number" id="redgum" class="form-control" placeholder="Enter Your Value">
<div class="mt-3">
<span class="sammy">Price </span>
<input type="text" id="redgumvalue" name="redgum" class="total-amount form-control" readonly>
</div>
</div>
</div>
<div class="col-md-6">
<div class="mb-3 menier">
<h4>Mixed Gum:</h4>
$100 Per Cubic Metre
<input type="number" id="mixedgum" class="form-control" placeholder="Enter Your Value">
<div class="mt-3">
Price <input id="mixedgumvalue" type="text" name="mixedgum" class="total-amount form-control" readonly>
</div>
</div>
</div>
<div class="col-md-6">
<div class="mb-3 menier">
<h4>Brown Bark:</h4>
$110 Per Cubic Metre <input id="brownbark" type="number" class="form-control" placeholder="Enter Your Value">
<div class="mt-3">
Price <input id="brownbarkvalue" type="text" name="brownbark" class="total-amount form-control" readonly>
</div>
</div>
</div>
<div class="col-md-6 mt-2">
<div class="mb-3">
<input type="checkbox" class="form-check-input" id="stackfee" name="stackingfee" value="25">
<label class="form-check-label" for="exampleCheck1">Stacking Fee: $25 Per m3 </label>
</div>
</div>
<div class="col-md-6 mt-2">
<div class="mb-3">
<input type="checkbox" class="form-check-input" id="delivery" name="deliveryfee" value="50">
<label class="form-check-label" for="exampleCheck1">Delivery Fee: $50 Minimum </label>
</div>
</div>
<div class="col-md-12 mb-3">
<strong class="">
Total Amount: $
</strong>
<input type="number" class="form-control total-amount" id="sum" name="totalsum" disabled>
</div>
<div class="col-md-12">
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>Jquery代码
$(document).ready(function(){
$('#ironbark').change(function(){
var ironbarkrate = parseFloat($('#ironbark').val()) || 0;
$('#ironbarvalue').attr('value', 210 * ironbarkrate);
});
$('#redgum').change(function(){
var redgum = parseFloat($('#redgum').val()) || 0;
$('#redgumvalue').attr('value', 200 * redgum);
});
$('#mixedgum').change(function(){
var mixedgum = parseFloat($('#mixedgum').val()) || 0;
$('#mixedgumvalue').attr('value', 100 * mixedgum);
});
$('#brownbark').change(function(){
var brownbark = parseFloat($('#brownbark').val()) || 0;
$('#brownbarkvalue').attr('value', 110 * brownbark);
});
$('#ironbarvalue, #redgumvalue,#mixedgumvalue,#brownbarkvalue').change(function(){
var value1 = parseFloat($('#ironbarvalue').val()) || 0;
var value2 = parseFloat($('#redgumvalue').val()) || 0;
var value3 = parseFloat($('#mixedgumvalue').val()) || 0;
var value4 = parseFloat($('#brownbarkvalue').val()) || 0;
var value5 = parseFloat($('#stackfee').val()) || 0;
var value6 = parseFloat($('#delivery').val()) || 0;
$('#sum').attr('value',value1 + value2 + value3 + value4 + value5 + value5);
});
});我试图得到所有的总和总额...但我值得注意的是得到总额显示，不是因为价格字段是由Jquery生成
2条答案
按热度按时间92dk7w1h1#
您需要创建一个通用函数来计算总和，并且需要在每个输入
change和复选框click事件中调用该函数，如下所示：工作示例：
nfg76nw02#
获取太多的id会有问题，请使用$（document）选择全部，并使用**$（'#sum'）.瓦尔（）**输入总值。