How get total sum from input box values using Javascript

Question

I am not perfect in Javascript   I want to show total sum of values entered in qty input boxes in next input box named total without refreshing page  Can anyone will help me to figure it out     Here is javascript    lt script type  text javascript  gt    var howmanytoadd   2   var rows    function calc          var tot   0       for  var i   0  i  lt  rows length  i               var linetot   0           rows i  getElementsByTagName  input   howmanytoadd  value   linetot           tot    linetot              document getElementById  total   value   tot     onload   function           rows   document getElementById  tab   getElementById  qty1         for  var i   0  i  lt  rows length  i               rows getElementsByTagName  input   i  onkeyup   calc             lt  script gt    Here is my html code   Qty1    lt input type  text  name  qty1  id  qty   gt  lt br gt  Qty2    lt input type  text  name  qty2  id  qty   gt  lt br gt  Qty3    lt input type  text  name  qty3  id  qty   gt  lt br gt  Qty4    lt input type  text  name  qty4  id  qty   gt  lt br gt  Qty5    lt input type  text  name  qty5  id  qty   gt  lt br gt  Qty6    lt input type  text  name  qty6  id  qty   gt  lt br gt  Qty7    lt input type  text  name  qty7  id  qty   gt  lt br gt  Qty8    lt input type  text  name  qty8  id  qty   gt  lt br gt   lt br gt  lt br gt  Total    lt input type  text  name  total  id  total   gt    here is screen shot

User · Answer

I need to sum the span elements so I edited Akhil Sekharan's answer below.

var arr = document.querySelectorAll('span[id^="score"]');
var total=0;
    for(var i=0;i<arr.length;i++){
        if(parseInt(arr[i].innerHTML))
            total+= parseInt(arr[i].innerHTML);
    }
console.log(total)

You can change the elements with other elements link will guide you with editing.

https://www.w3.org/TR/css3-selectors/#attribute-substrings

User · Answer

Here s a simpler solution using what Akhil Sekharan has provided but with a little change   var inputs   document getElementsByTagName  input     for  var i   0  i  lt  inputs length  i    1    if parseInt inputs i  value            inputs i  value                          document getElementById  total   value   total

User · Answer

Try this   function add        var sum   0    var inputs   document getElementsByTagName  input      for i   0  i  lt   inputs length  i            if  inputs i  name     qty  i             sum    parseInt input i  value              console log sum

User · Answer

To sum with decimal use this   In the javascript change parseInt with parseFloat and add this line tot toFixed 2   for this result       function findTotal        var arr   document getElementsByName  qty        var tot 0      for var i 0 i lt arr length i             if parseFloat arr i  value               tot    parseFloat arr i  value             document getElementById  total   value   tot      tot toFixed 2       Use step   01  min  0  type  number  in the input filed  Qty1    lt input onblur  findTotal    step   01  min  0  type  number  name  qty  id  qty1   gt  lt br gt  Qty2    lt input onblur  findTotal    step   01  min  0  type  number  name  qty  id  qty2   gt  lt br gt  Qty3    lt input onblur  findTotal    step   01  min  0  type  number  name  qty  id  qty3   gt  lt br gt  Qty4    lt input onblur  findTotal    step   01  min  0  type  number  name  qty  id  qty4   gt  lt br gt  Qty5    lt input onblur  findTotal    step   01  min  0  type  number  name  qty  id  qty5   gt  lt br gt  Qty6    lt input onblur  findTotal    step   01  min  0  type  number  name  qty  id  qty6   gt  lt br gt  Qty7    lt input onblur  findTotal    step   01  min  0  type  number  name  qty  id  qty7   gt  lt br gt  Qty8    lt input onblur  findTotal    step   01  min  0  type  number  name  qty  id  qty8   gt  lt br gt   lt br gt  lt br gt  Total    lt input type  number  step   01  min  0  name  total  id  total   gt

User · Answer

x000D   x000D    document  ready function    x000D   x000D      iterate through each textboxes and add keyup x000D      handler to trigger sum event x000D        txt   each function     x000D   x000D       this  keyup function    x000D      calculateSum    x000D         x000D        x000D   x000D       x000D   x000D   function calculateSum     x000D   x000D    var sum   0  x000D      iterate through each textboxes and add the values x000D        txt   each function     x000D   x000D       add only if the value is number x000D     if  isNaN this value   amp  amp  this value length  0    x000D      sum    parseFloat this value   x000D       x000D   x000D        x000D       toFixed   method will roundoff the final sum to 2 decimal places x000D        sum   html sum toFixed 2    x000D     x000D  body   x000D      font-family  sans-serif  x000D       x000D      summation   x000D      font-size  18px  x000D      font-weight  bold  x000D      color  174C68  x000D       x000D      txt   x000D      background-color   FEFFB0  x000D      font-weight  bold  x000D      text-align  right  x000D       x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 7 1 jquery min js  gt  lt  script gt  x000D   x000D   lt table width  300px  border  1  style  border-collapse collapse background-color  E8DCFF  gt  x000D    lt tr gt  x000D     lt td width  40px  gt 1 lt  td gt  x000D     lt td gt Butter lt  td gt  x000D     lt td gt  lt input class  txt  type  text  name  txt   gt  lt  td gt  x000D    lt  tr gt  x000D    lt tr gt  x000D     lt td gt 2 lt  td gt  x000D     lt td gt Cheese lt  td gt  x000D     lt td gt  lt input class  txt  type  text  name  txt   gt  lt  td gt  x000D    lt  tr gt  x000D    lt tr gt  x000D     lt td gt 3 lt  td gt  x000D     lt td gt Eggs lt  td gt  x000D     lt td gt  lt input class  txt  type  text  name  txt   gt  lt  td gt  x000D    lt  tr gt  x000D    lt tr gt  x000D     lt td gt 4 lt  td gt  x000D     lt td gt Milk lt  td gt  x000D     lt td gt  lt input class  txt  type  text  name  txt   gt  lt  td gt  x000D    lt  tr gt  x000D    lt tr gt  x000D     lt td gt 5 lt  td gt  x000D     lt td gt Bread lt  td gt  x000D     lt td gt  lt input class  txt  type  text  name  txt   gt  lt  td gt  x000D    lt  tr gt  x000D    lt tr gt  x000D     lt td gt 6 lt  td gt  x000D     lt td gt Soap lt  td gt  x000D     lt td gt  lt input class  txt  type  text  name  txt   gt  lt  td gt  x000D    lt  tr gt  x000D    lt tr id  summation  gt  x000D     lt td gt  amp nbsp  lt  td gt  x000D     lt td align  right  gt Sum   lt  td gt  x000D     lt td align  center  gt  lt span id  sum  gt 0 lt  span gt  lt  td gt  x000D    lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

Javascript    window sumInputs   function         var inputs   document getElementsByTagName  input            result   document getElementById  total            sum   0                   for var i 0  i lt inputs length  i              var ip   inputs i            if  ip name  amp  amp  ip name indexOf  total    lt  0                sum    parseInt ip value     0                        result value   sum          Html   Qty1    lt input type  text  name  qty1  id  qty   gt  lt br gt  Qty2    lt input type  text  name  qty2  id  qty   gt  lt br gt  Qty3    lt input type  text  name  qty3  id  qty   gt  lt br gt  Qty4    lt input type  text  name  qty4  id  qty   gt  lt br gt  Qty5    lt input type  text  name  qty5  id  qty   gt  lt br gt  Qty6    lt input type  text  name  qty6  id  qty   gt  lt br Qty7    lt input type  text  name  qty7  id  qty   gt  lt br gt  Qty8    lt input type  text  name  qty8  id  qty   gt  lt br gt   lt br gt  lt br gt  Total    lt input type  text  name  total  id  total   gt    lt a href  javascript sumInputs    gt Sum lt  a gt    Example  http   jsfiddle net fRd9N 1

User · Answer

Try   Qty1    lt input onblur  findTotal    type  text  name  qty  id  qty1   gt  lt br gt  Qty2    lt input onblur  findTotal    type  text  name  qty  id  qty2   gt  lt br gt  Qty3    lt input onblur  findTotal    type  text  name  qty  id  qty3   gt  lt br gt  Qty4    lt input onblur  findTotal    type  text  name  qty  id  qty4   gt  lt br gt  Qty5    lt input onblur  findTotal    type  text  name  qty  id  qty5   gt  lt br gt  Qty6    lt input onblur  findTotal    type  text  name  qty  id  qty6   gt  lt br gt  Qty7    lt input onblur  findTotal    type  text  name  qty  id  qty7   gt  lt br gt  Qty8    lt input onblur  findTotal    type  text  name  qty  id  qty8   gt  lt br gt   lt br gt  lt br gt  Total    lt input type  text  name  total  id  total   gt         lt script type  text javascript  gt  function findTotal        var arr   document getElementsByName  qty        var tot 0      for var i 0 i lt arr length i             if parseInt arr i  value               tot    parseInt arr i  value             document getElementById  total   value   tot          lt  script gt

[javascript] How get total sum from input box values using Javascript?

Examples related to javascript

Examples related to sum

Examples related to calculator