Get the looping selected input value and sum the value inside when it change

Question

I have a simple form that loops some select elements from the server. In this case, I want to sum every option value that selected and not the disabled one and show the calculation of these values into the input value every time when the user change the value inside it. How is it work with onchage event. Thanks in advance.

HTML Code Example

user_295783 · Answer

Filter, Map and reduce

$(function() {
  const sumSels = () => $("#total").val($sels
    .filter(":enabled") // this is not strictly needed in your case
    .map(function() { return +this.value })
    .get()
    .reduce((a, b) => a + b)
    .toFixed(2));

  const $sels = $('[name="presence-value"]');
  $sels.on("change", sumSels); // event handler
  sumSels(); // initialise on load
});

user_11359076 · Answer

You need to use document.querySelectorAll('select') to get all select tags and then by selectedOptions get selected value of each select tags and calculate sum of them.

All above actions is in the one method (say getSum) that you can bind with onchange="getSum()" of each select tag.

Note that this solution is based on pure javascript code and I don't use any js library.

function getSum() {
            var selectes = document.querySelectorAll('select');
            sum = 0;
            for (var i = 0; i < selectes.length; i++) {
                sum += +selectes[i].value;
            }
            document.getElementById("submited").value = sum;
        }

user_1772933 · Answer

You can just listen to the change event from any of the selects, then add their values together

$(document).ready(function() {
  $('select').change(function() {
    let total = 0;
    $('select').each(function() {
      total += +$(this).val()
    })
    console.log('the total is', total)
    $('[name=total]').val(total)
  })
})

Get the looping selected input value and sum the value inside when it change

3 Answers