How to iterate through ASP .NET textboxes using javascript and calculate a value ?

Question

i have a multiple textboxes in repeater and i will enter value in those textboxes at runtime. and i want sum of all value entered in those textboxes in one label.i want to do this thing using java script. so can u please help me.

Answer 1

example:

http://forum.jquery.com/topic/textboxes-in-asp-repeater-with-total-row

Answer 2

Something like so, assuming that you want to sum all textboxes in the repeater control. This will only sum number values too.

var repeater = document.getElementById('repeater_id');
var inputs = repeater.getElementsByTagName('input');
var sum = 0;
for (var i=0; i < inputs.length; i++) {
    if (inputs[i].type === "text" && /^\d+$/.test(inputs[i].value)) {
        sum += inputs[i].value;
    }
}

If you're doing a lot of client-side stuff, why not take a look at doing this with a library, such as jQuery.

Answer 3

Here is one idea to get you started:

1. Put a <div> around your Repeater and give it a unique id.
2. Use the document.getElementById() function in JavaScript to obtain a reference to that <div>.
3. Use the getElementsByTagName() funtion in the DOM element to find all <input>s within.
4. Loop over them, adding their values (parsed as integers) together.

So if your markup looks something like this:

<div id="coolStuff">
    <asp:Repeater ... >
</div>

The JavaScript looks approximately like this:

var container = document.getElementById("coolStuff");
var inputs = container.getElementsByTagName("input");

var sum = 0;

for (var i = 0; i < inputs.length; i++) {
    sum += inputs[i].value;
}

alert(sum);

Now, this code does not check to ensure that the <input>s are actually of type=text or to confirm that the entered values are numbers. Those parts are left as exercises for the reader ;)

---

Edit: If you have multiple text boxes in each "line" outputted by the Repeater and you only want to sum the values for one "group" of boxes, you will need to change the script a bit. Here are two possible solutions - pick one:

1. If you know exactly how many <input> elements you have in each "line", you can change the for loop in the client script to only visit every Nth element. Eg. to select only the last of three fields in each line: for (var i = 2; i < inputs.length; i += 3)

2. Change your markup to include a class attribute on the <input> elements to be part of the sum. Within the for loop, do a test on inputs[i].className to verify if the particular field is to be included.

Answer 4

<asp:Repeater ID="rpt" CssClass="rpt">
<itemTemplate>
  <asp:TextBox ID="txtValue" />
</itemTemplate>
<footerTemplate>
  <asp:Label Id="lblResult" CssClass="result" />
</footerTemplate>
</asp:Repeater>

javascript using jQuery:

$(document).ready(function(){
  $('.rpt input[type=text]').live('onchange', calc);
});

function calc(){
  var result = 0;
 $('.rpt input[type=text]').each(function(){
  // need better input cleaning here...
  result += parseInt($(this).val());
  });
  $('.rpt .result').val(result);
}

HTH.

Answer 5

Get jQuery. Add a class to the textbox in the repeater markup using eg CssClass ='totals'. Use the following jQuery code to total the values

var total = 0;
$('input.totals').each(function(){

 if (!isNan($(this).text())) total += $(this).text()
});

alert('Total is ' + total);