admin管理员组

文章数量:1327959

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

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

Share Improve this question edited Oct 17, 2015 at 9:51 asked Oct 17, 2015 at 9:08 user5222952user5222952
Add a ment  | 

6 Answers 6

Reset to default 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>

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

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>

var sum = 0,
    inputs = document.getElementsByName("name");

// inputs is not an array, but a nodelist, it doesn't have
// a forEach method: http://stackoverflow./questions/16053357/
[].forEach.call(inputs, function(input) {
    sum += parseInt(input.value);
});

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.

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>

本文标签: javascriptGetting sum of multiple textbox values that use the same nameStack Overflow