1

I am wondering how to use javascript to get multiple values from html textboxes that have the same name and get the sum? If possible please use a simple loop method that is easy to understand

6 Answers6

3

You can do something like this with pure JavaScript:

var sum = 0;
var btn = document.getElementById("btn");
btn.addEventListener("click", function(){
 var inputEle= document.getElementsByName("txt1");
    for(var i=0;i<inputEle.length;i++){
      //alert(inputEle[i].value);  //get each value
      sum = sum + parseInt(inputEle[i].value); // If you want the sum(only for numbers else you will see a string as output)
    }
    alert("Total Sum = "+sum);

});


 
        
<input type="text" name="txt1"/>
<input type="text" name="txt1"/>
<input type="text" name="txt1"/>
<input type="text" name="txt1"/>
<input type="text" name="txt1"/>

<button id="btn" class="getVal">Click here</button>
Sandeep Nayak
  • 4,649
  • 1
  • 22
  • 33
1

documet.getElementsByName() returns all elements than have given names.
Just do it, and then loop in elements
Something ike this

<input type="text" name="n"/>
<input type="text" name="n"/>

Then get values

var texts = document.getElementsByName("n");
var sum = "";
for( var i = 0; i < texts.length; i ++ ) {
    var n = texts[i].value || 0;
    sum = sum + n;
}
alert(sum);

Try this JSFiddle example

Gor
  • 2,808
  • 6
  • 25
  • 46
  • This one actually shows up with something however if one text box is 3 and the other is 4 it shows as 34? I am looking for the sum, and also the type is number not text. Thanks again though –  Oct 17 '15 at 09:46
  • You can use js parseInt method. In textboxes values are strings, you must parse it to numbers. I updated JSFiddle example. please check http://jsfiddle.net/gormatevosyan14/nq70j0x2/2/ this one – Gor Oct 17 '15 at 09:48
  • It is because if you are trying to add string to string , you will get string. for example "3" + "4" = "34". But when you parse values to numbers, result will number f.x 3 + 4 = 7. Alse this can help you to understand how it works in jsvascript. + operator with different types of operands "3" + 4 = "34"; 3 + "4" = "34"; "3" + "4" = "34"; 3 + 4 = 7; Where "3" is string, but 3 is number. Hope it help you – Gor Oct 17 '15 at 09:51
  • It is because in jsfiddle, when you define html, js was not compilled yet, and it cant get function on click. Change onload to no-wrap - in in left side. https://jsfiddle.net/gormatevosyan14/f5zc8f4r/2/ Also if you will do it locally, it will work well – Gor Oct 17 '15 at 10:42
  • Send me an email. gormatevosyan14@gmail.com – Gor Oct 17 '15 at 11:14
1

function myFunction() {
 var texts = document.getElementsByName("n");
    var sum = 0;
    for( var i = 0; i < texts.length; i ++ ) {
      var aa=parseFloat(texts[i].value);
      if(aa=="NaN" || aa==null || aa==""){aa=parseFloat("0");}
        sum = sum + aa;
    }
    document.getElementById("sum").innerHTML = sum;
}
<input type="text" name="n" onKeyUp="myFunction();" value="0"/><br>
<input type="text" name="n" onKeyUp="myFunction();" value="0"/><br>
<input type="text" name="n" onKeyUp="myFunction();" value="0"/><br>
<input type="text" name="n" onKeyUp="myFunction();" value="0"/><br>
<p id="sum"></p>
<button onClick="myFunction();"> Get Sum</button>
Waruna Manjula
  • 3,067
  • 1
  • 34
  • 33
0
var sum = 0,
    inputs = document.getElementsByName("name");

// inputs is not an array, but a nodelist, it doesn't have
// a forEach method: http://stackoverflow.com/questions/16053357/
[].forEach.call(inputs, function(input) {
    sum += parseInt(input.value);
});
Emanuele Spatola
  • 555
  • 3
  • 10
  • The use of *Array.prototype.forEach* to iterate over a collection is more code than an equivalent for loop and very much slower. – RobG Oct 17 '15 at 10:51
0

I will try to answer as far as i understand your question use.

var len = document.getElementsByName('text').length;

for(i = 0; i < len; i++)

{

//use each value using. document.getElementsByName('text')[i].value
}

You have not specified how you want to use the value so use this line where you want to use it in the loop:

document.getElementsByName('text')[i].value Hope that helps.

Community
  • 1
  • 1
domii
  • 169
  • 1
  • 14
0

try this

<html>
<head>
<script> // script to retrieve all checked value by name
function print_multi_tc(name){
var formblockk;
var forminputss;
var ref_arr=[];
var v=0;
formblockk= document.getElementById('form_id');
forminputss = formblock.getElementsByTagName('input');//retrieve by tag
var arr_len=forminputss.length;
for (i = 0; i < arr_len; i++) {
var regex = new RegExp(name, "i");
if (forminputs[i].checked==true)
{
ref_arr[v]  =forminputs[i].value;//array contains all the checked value
 v++;
}
}
}
</script>
</head>
<body>
<form id="form_id">
<input type="checkbox" name="areaa[]">
<input type="checkbox" name="areaa[]">
<input type="checkbox" name="areaa[]">
<input type="checkbox" name="areaa[]">//name as much you need 
</form>
</body>
</html>
Vigneswaran S
  • 2,039
  • 1
  • 20
  • 32
  • Once you have a reference to the form, you can get all the controls with a name of *areaa[]* as `formblockk['areaa[]']`. – RobG Oct 17 '15 at 11:03