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

Improve this question

6 Answers 6

Reset to default
4

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

OP says in title 'Getting sum', you don't answer it
Read the question carefully.. OP says I am wondering how to use javascript to get multiple values from html textboxes that have the same name?
I don't have any doubt about your skills, it was so hard to add the sum ? I have read the question, and i still think he want the sum
Added for the convenience.
Sorry guys my title was slightly different to the post. I have updated it, and yes it is the sum I am looking for
|
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

Improve this answer

5 Comments

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
You can use js parseInt method. In textboxes values are strings, you must parse it to numbers. I updated JSFiddle example. please check jsfiddle.net/gormatevosyan14/nq70j0x2/2 this one
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
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 <body> in left side. jsfiddle.net/gormatevosyan14/f5zc8f4r/2 Also if you will do it locally, it will work well
Send me an email. [email protected]
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>

Improve this answer

Comments

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);
});
Improve this answer

1 Comment

The use of Array.prototype.forEach to iterate over a collection is more code than an equivalent for loop and very much slower.
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.

Improve this answer

Comments

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>
Improve this answer

1 Comment

Once you have a reference to the form, you can get all the controls with a name of areaa[] as formblockk['areaa[]'].

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.