[英]Automatically calculate the sum of input values with javascript
I need some help in calculating the sum of the numbers a user has entered, and display it automatically.我需要一些帮助来计算用户输入的数字的总和,并自动显示它。 When the user delete one number the sum should also auto calculate.当用户删除一个数字时,总和也应该自动计算。
$('.col-lg-1').change(function() { var total = 0; $('.col-lg-1').each(function() { if ($(this).val() != '') { total += parseInt($(this).val()); } }); $('#result').html(total); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-lg-1"> <label>TEST 1 </label> <input type="hidden" name="section_id" value="<?php echo $section_id; ?>"> <input type="hidden" name="session_id" value="<?php echo $session_id; ?>"> <input type="hidden" name="student_id" value="<?php echo $student_id; ?>"> <input type="hidden" name="class_id" value="<?php echo $class_id; ?>"> <input type="number" name="mt_ca1" class="form-control input-sm rounded-0" required> </div> <div class="col-lg-1" id="t2"> <label>TEST 2</label> <input type="number" name="mt_ca2" class="form-control input-sm rounded-0" required> </div> <div class="col-lg-1" id="assg"> <label>TEST 3</label> <input type="number" name="mt_ca3" class="form-control input-sm rounded-0" required> </div> <div class="col-lg-1"> <label>TOTAL</label> <output id="result"></output> </div>
Almost there.差不多好了。 You are targeting '.col-lg-1'
which are divs, not inputs.您的目标是'.col-lg-1'
,它是 div,而不是输入。 You need to target the inputs in order to read their values.您需要定位输入以读取它们的值。
const $inputs = $('input[type="number"]') $inputs.change(function() { var total = 0; $inputs.each(function() { if ($(this).val() != '') { total += parseInt($(this).val()); } }); $('#result').html(total); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-lg-1"> <label>TEST 1 </label> <input type="hidden" name="section_id" value="<?php echo $section_id; ?>"> <input type="hidden" name="session_id" value="<?php echo $session_id; ?>"> <input type="hidden" name="student_id" value="<?php echo $student_id; ?>"> <input type="hidden" name="class_id" value="<?php echo $class_id; ?>"> <input type="number" name="mt_ca1" class="form-control input-sm rounded-0" required> </div> <div class="col-lg-1" id="t2"> <label>TEST 2</label> <input type="number" name="mt_ca2" class="form-control input-sm rounded-0" required> </div> <div class="col-lg-1" id="assg"> <label>TEST 3</label> <input type="number" name="mt_ca3" class="form-control input-sm rounded-0" required> </div> <div class="col-lg-1"> <label>TOTAL</label> <output id="result"></output> </div>
.col-lg-1
is a DIV - you're attaching a change event and trying to get this.value
from a DIV which will not work. .col-lg-1
是一个DIV - 您正在附加一个更改事件并试图从一个无效的 DIV 中获取this.value
。
Instead, cache your inputs and (on "input"
event) .reduce()
their values into an integer:相反,将您的输入和(在"input"
事件上) .reduce()
它们的值缓存为一个整数:
jQuery(function($) { var $inp = $('.input-sm'); //PS: Use a more specific selector than this one var $res = $('#result'); $inp.on('input', function() { const tot = $inp.get().reduce(function(acc, el) { acc += parseInt(el.value) || 0; return acc; }, 0); $res.text(tot); }); });
<div> <label>TEST 1 </label> <input type="number" name="mt_ca1" class="inp form-control input-sm rounded-0" required value="0"> </div> <div class="col-lg-1" id="t2"> <label>TEST 2</label> <input type="number" name="mt_ca2" class="form-control input-sm rounded-0" required value="0"> </div> <div class="col-lg-1" id="assg"> <label>TEST 3</label> <input type="number" name="mt_ca3" class="form-control input-sm rounded-0" required value="0"> </div> <div class="col-lg-1"> <label>TOTAL</label> <output id="result"></output> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
your each element is number type and have same classes 'form-control', 'input-sm', & 'rounded-0'.您的每个元素都是数字类型,并且具有相同的类“form-control”、“input-sm”和“rounded-0”。 so either所以要么
$('input[type=number]').change(function() {
var total = 0;
$('input[type=number]').each(function() {
if ($(this).val() != '') {
total += parseInt($(this).val());
}
});
$('#result').html(total);
});
or或者
$('.rounded-0').change(function() {
var total = 0;
$('.rounded-0').each(function() {
if ($(this).val() != '') {
total += parseInt($(this).val());
}
});
$('#result').html(total);
});
can be used.可以使用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.