[英]Sum of all textboxes using jquery
Im adding all textboxes values on blur call.我在模糊调用中添加了所有文本框值。 I give some number in one textbox.
我在一个文本框中给出了一些数字。 When it tries to add value of the other textbox value, it throws NaN.
当它尝试添加另一个文本框值的值时,它会抛出 NaN。
Here is my code这是我的代码
function sumOfIncome() { var sum = 0; $('.add').each(function() { sum += parseInt(this.value); console.log(sum) }); $('#netPay').val(sum); } $('.add').blur(function() { sumOfIncome(); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group row"> <div class="col-md-3"> <label for="DA" class="col-form-label">DA</label> </div> <div class="col-sm-2"> <input type="number" class="form-control add" id="da" placeholder="DA"> </div> </div> <div class="form-group row"> <div class="col-md-3"> <label for="HRA" class="col-form-label">HRA</label> </div> <div class="col-sm-2"> <input type="number" class="form-control add" id="hra" placeholder="HRA"> </div> </div>
Where am I doing wrong?我哪里做错了?
The easiest solution is to change your sum line to sum += parseInt(this.value) || 0;
最简单的解决方案是将 sum 行更改为
sum += parseInt(this.value) || 0;
sum += parseInt(this.value) || 0;
. . This way, if the field is empty and returns a falsey value like
NaN
, it will instead use 0
.这样,如果该字段为空并返回像
NaN
这样的假值,它将改为使用0
。
function sumOfIncome() { var sum = 0; $('.add').each(function() { sum += parseInt(this.value) || 0; console.log(sum) }); $('#netPay').val(sum); } $('.add').blur(function() { sumOfIncome(); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group row"> <div class="col-md-3"> <label for="DA" class="col-form-label">DA</label> </div> <div class="col-sm-2"> <input type="number" class="form-control add" id="da" placeholder="DA"> </div> </div> <div class="form-group row"> <div class="col-md-3"> <label for="HRA" class="col-form-label">HRA</label> </div> <div class="col-sm-2"> <input type="number" class="form-control add" id="hra" placeholder="HRA"> </div> </div>
Use this $.isNumeric()
jsfiddle :使用这个
$.isNumeric()
jsfiddle :
Html:网址:
<div class="form-group row">
<div class="col-md-3"><label for="DA" class="col-form-label">DA</label></div>
<div class="col-sm-2"> <input type="number" class="form-control add" id="da" placeholder="DA">
</div>
</div>
<div class="form-group row">
<div class="col-md-3"><label for="HRA" class="col-form-label">HRA</label></div>
<div class="col-sm-2"> <input type="number" class="form-control add" id="hra" placeholder="HRA">
</div>
</div>
<div id="netPay">
</div>
Jquery:查询:
function sumOfIncome() {
var sum = 0;
$('.add').each(function(){
var val = $(this).val();
if($.isNumeric(val))
{
sum += parseInt(val);
console.log(sum)
}
});
$('#netPay').text(sum);
}
$('.add').blur(function(){
sumOfIncome();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.