How to write sum of all input types values in span on change using javascript/jquery?

javascript input onchange get value
javascript input change event
jquery detect input value change by javascript
input change event jquery
how to store span value in php
html input element events
input value change event angular
how to post span value in php

Currently, i can output each of their value and display it as a series, but what i want is to sum all of their values and display its total.

This is my sample Code:

Javascript

$(function() {
  $('input[name=selectProducts]').on('change', function() {    
    $('#products').text($('input[name=selectProducts]:checked, input[name=selectProducts][type=text]'').map(function() {
      return this.value;
    }).get());
  });
});

HTML

<input type="checkbox" name="selectProducts" id="product1" value="5" />
<input type="checkbox" name="selectProducts" id="product2" value="5" />
<input type="checkbox" name="selectProducts" id="product3" value="5" />
<!-- i want to include these input type text -->
<input type="text" name="selectProducts" id="product4" value="10" />
<input type="text" name="selectProducts" id="product5" value="10" />
<span name="products" id="products"></span>

OUTPUT

5,5,5,10,10


35  <!-- my desired output should look like this -->

I want to sum all of them to get the total of 35. Please help me.

Use .toArray() to converting jquery object to array and use .reduce() to loop through array items and sum values.

$('input[name=selectProducts]').on('change', function() {    
    $('#products').text(function(){
        return $('input[name=selectProducts]:checked, input[name=selectProducts][type=text]').toArray().reduce(function(tot, val) {
            return tot + parseInt(val.value);
        }, 0);
    });
});

$('input[name=selectProducts]').on('change keyup', function() {    
  $('#products').text(function(){
    return $('input[name=selectProducts]:checked, input[name=selectProducts][type=text]').toArray().reduce(function(total, val) {
      return total + parseInt(val.value);
    }, 0);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="selectProducts" id="product1" value="5" />
<input type="checkbox" name="selectProducts" id="product2" value="5" />
<input type="checkbox" name="selectProducts" id="product3" value="5" />
<input type="text" name="selectProducts" id="product4" value="10" />
<input type="text" name="selectProducts" id="product5" value="10" />
<span name="products" id="products"></span>

How to write all input types values in span on change using , How to write all input types values in span on change using javascript/jquery? whenever i select a checkbox, it will place its value to <span  jQuery sum of all textbox values: This article explains how to calculate the total of all textboxes values in a table column. Inshort on text change event, we calculate the sum of all input values entered in the table column, i.e., whenever the user enters any values or modifies the value to any of the given textbox will calculate and display

You're headed the right way other than a syntax error, but you haven't actually summed them up. Array#reduce is the classic tool for summing values in an array. See comments:

$(function() {
  $('input[name=selectProducts]').on('change', function() {    
    // Get the values, turn them into numbers
    var values = $('input[name=selectProducts]:checked, input[name=selectProducts][type=text]').map(function() {
      return +this.value;
      //     ^---- coerce to number
    }).get();
    // Sum them up
    var sum = values.reduce(function(a, b) { return a + b; });
    // Show the result
    $('#products').text(sum);
  });
});
<input type="checkbox" name="selectProducts" id="product1" value="5" />
<input type="checkbox" name="selectProducts" id="product2" value="5" />
<input type="checkbox" name="selectProducts" id="product3" value="5" />
<!-- i want to include these input type text -->
<input type="text" name="selectProducts" id="product4" value="10" />
<input type="text" name="selectProducts" id="product5" value="10" />
<span name="products" id="products"></span>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

JavaScript and jQuery by Examples, Similarly, we can use required on <select> to specify input value cannot be an empty You can use JavaScript to valid an HTML form's input field before submitting the It returns true if all the input validation functions return true , resulted in the If the current player wins, it highlights the three winning cells by changing the  Sum HTML Textbox Values using jQuery / JavaScript by Viral Patel · July 21, 2009 Here is a small code snippet to sum the values of all textboxes in a form in JavaScript using jQuery.

You could do it by setting a variable (count in this example) and using an each function instead of the map:

$(function() {
  let count;
  $('input[name=selectProducts]').on('change', function() {
    count = 0;
    $('input[name=selectProducts]:checked, input[name=selectProducts][type=text]').each(function(){
      count += parseInt(this.value);
    })
    $('#products').text(count);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" name="selectProducts" id="product1" value="5" />
<input type="checkbox" name="selectProducts" id="product2" value="5" />
<input type="checkbox" name="selectProducts" id="product3" value="5" />
<input type="text" name="selectProducts" id="product4" value="10" />
<input type="text" name="selectProducts" id="product5" value="10" />
<span name="products" id="products"></span>

Events: change, input, cut, copy, paste, The change event triggers when the element has finished changing. input type = " text " onchange = " alert(this.value) " > < input type = " button input type = " text " id = " input " > oninput: < span id = " result So we can't use event. For instance, the code below prevents all such events and shows what  A friend asked me how to sum all TextBox value as he type the numbers? Here’s a quick answer to that: Give all your TextBoxes a class name and use the jQuery ‘keyup()’ and ‘each()’ methods to compute the sum. LIVE DEMO HTML - a table where the product name and price TextBox is found.

[Solved] javascript: how to change span value to textbox value while , You have to pass value from spantext to hiddentext before submit button click. When you click on submit button, during that time hidden input value is null. So, you For this, you can use mouseover event on button. <script type="text/​javascript" src="jquery.min.js"></script> <script All Rights Reserved. See the Pen javascript-math-exercise-17 by w3resource (@w3resource) on CodePen. Improve this sample solution and post your code through Disqus Previous: Write a JavaScript function to check whether a variable is numeric or not.

JavaScript Array forEach() Method, Example. Get the sum of all the values in the array: var sum = 0; var numbers = [​65, 44, 12, 4]; numbers.forEach(myFunction); function myFunction(item) { sum +=​  Examples of using JavaScript to access and manipulate HTML input objects. Button Object Disable a button Find the name of a button Find the type of a button Find the value of a button Find the text displayed on a button Find the id of the form a button belongs to

How to sum (Update) of all input button price value using jquery , Writenew article How to sum (Update) of all input button price value using jquery 1) first you can apply the common class on all input type (checkbox,​radio,multipleselect,dropdown..) <label class="radio criteria_opt" title=""> <​span><input type="radio" 3) After that Call a change-event using Jquery Luckily Javascript provides us with ways to write immutable code, which I will demonstrate below. Changes are marked in bold. const numbers = [10, 20, 30, 40] // sums to 100 // function for adding

Comments
  • No point to the map and get calls (if you're just looping, map is the wrong tool; each is the right one), and you're still calling text with the array instead of the sum.
  • @T.J.Crowder Thanks, I've simplified and updated my answer.