Sum of all textboxes using jquery

Question

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.

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?

Answer 1

The easiest solution is to change your sum line to 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 .

 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>

Answer 2

Use this $.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();
  });