JQuery returns NaN value while calculating multiple inputs in a row

Question

I have a multiple input rows and all rows have a total column at the end. Now, I want to put the total result of each rows in column Total. I tried but it returns NaN value instead of total result. Attached is my view & script please help what I am missing??? Thanks

$('body').on('change', '.bgpending, .registered', function() {
  var el = $(this);
  var totalRow = 0;
  el.closest('.dosiaPlace').find('input').each(function() {
    totalRow = totalRow + parseInt($(this).val());
  });
  el.closest('.dosiaPlace').find('.total-row').val(totalRow);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dosiaPlace">
  <div class="col-md-2">
    <label>@lang('dashboard.pastyear'):</label>
    <input type="number" value="0" class="form-control bgpending" name="bgpending[]" />
  </div>
  <div class="col-md-2">
    <label>@lang('dashboard.warida'):</label>
    <input type="number" value="0" class="form-control registered" name="registered[]" />
  </div>
  <div class="col-md-2">
    <label>@lang('dashboard.total'):</label>
    <input type="text" class="form-control total-row" />
  </div>
</div>

Result:

can you check logs of this value $(this).val() and make sure you are getting it right? so that hou can see what parseInt is getting? — Ayyappa Gollu
– Ayyappa Gollu, Commented Jan 4, 2020 at 8:33

CertainPerformance · Accepted Answer · 2020-01-04 08:27:03Z

The container, the .dosiaPlace, I presume, has 3 inputs: the .bgpending, the .registered, and the .total-row. Your el.closest('.dosiaPlace').find('input') finds all 3 of those, including the .total-row. But the .total-row is empty (initially), so

totalRow = totalRow + parseInt($(this).val());

for it results in

totalRow = totalRow + parseInt('');

And the empty string can't be parseInt'd (results in NaN). (You also probably don't want to be including the .total-row anyway)

Use input:not(.total-row') instead of input:

$('body').on('change', '.bgpending, .registered', function() {
  var el = $(this);
  var totalRow = 0;
  el.closest('body').find('input:not(.total-row)').each(function() {
    totalRow = totalRow + parseInt($(this).val());
  });
  el.closest('body').find('.total-row').val(totalRow);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-2">
  <label>@lang('dashboard.pastyear'):</label>
  <input type="number" value="0" class="form-control bgpending" name="bgpending[]" />
</div>
<div class="col-md-2">
  <label>@lang('dashboard.warida'):</label>
  <input type="number" value="0" class="form-control registered" name="registered[]" />
</div>
<div class="col-md-2">
  <label>@lang('dashboard.total'):</label>
  <input type="text" class="form-control total-row" />
</div>

Gorkhali Khadka · Accepted Answer · 2020-01-04 08:27:49Z

0

Your variable get null value or NaN just asign o if it is nan or empty

if(totalRow=='' || totalRow ==NaN )
{
  totalRow=0;  
}

answered Jan 4, 2020 at 8:27

Gorkhali Khadka

8358 silver badges12 bronze badges

Collectives™ on Stack Overflow

JQuery returns NaN value while calculating multiple inputs in a row

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related