Автоматически рассчитать сумму входных значений с javascript

Question

Мне нужна помощь в подсчете суммы чисел, введенных пользователем, и их автоматическое отображение. Когда пользователь удаляет одно число, сумма также должна автоматически рассчитываться.

$('.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

Почти нет. Вы нацеливаетесь на '.col-lg-1', которые являются div, а не входными данными. Вам необходимо настроить входы, чтобы прочитать их значения.

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 - это DIV - вы присоединяете событие изменения и пытаетесь получить this.value из DIV, который не будет работать.

Вместо этого кэшируйте свои входные данные и (при "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>

Answer 3

каждый ваш элемент имеет числовой тип и имеет одинаковые классы 'form-control', 'input-sm' и 'roundnded-0'. так что можно использовать

$('input[type=number]').change(function() {
  var total = 0;
  $('input[type=number]').each(function() {
    if ($(this).val() != '') {
      total += parseInt($(this).val());
    }
  });
  $('#result').html(total);
});

или

$('.rounded-0').change(function() {
  var total = 0;
  $('.rounded-0').each(function() {
    if ($(this).val() != '') {
      total += parseInt($(this).val());
    }
  });
  $('#result').html(total);
});

.