Automatically calculate the sum of input values with javascript

Question

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>

Answer 1

Almost there. You are targeting '.col-lg-1' which are divs, not inputs. 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>

Answer 2

.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.

Instead, cache your inputs and (on "input" event) .reduce() their values into an integer:

 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>

Answer 3

your each element is number type and have same classes '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.