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.
-
3This is not the place where you ask for finished code. Try to code it, then ask for help if you get stuck.driis– driis2010-04-22 18:32:27 +00:00Commented Apr 22, 2010 at 18:32
-
There's a discussion of this topic on the JQuery forum which might help.Glennular– Glennular2010-04-22 18:32:48 +00:00Commented Apr 22, 2010 at 18:32
-
Somebody please rename this. And maybe retag. And some more info wouldn't hurt either.Foxfire– Foxfire2010-04-22 18:32:57 +00:00Commented Apr 22, 2010 at 18:32
4 Answers
Here is one idea to get you started:
- Put a
<div>around yourRepeaterand give it a uniqueid. - Use the
document.getElementById()function in JavaScript to obtain a reference to that<div>. - Use the
getElementsByTagName()function in the DOM element to find all<input>s within. - 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:
If you know exactly how many
<input>elements you have in each "line", you can change theforloop 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)Change your markup to include a
classattribute on the<input>elements to be part of the sum. Within theforloop, do a test oninputs[i].classNameto verify if the particular field is to be included.
4 Comments
container.getElementById() (notice lower-case d) is supported, but it will not help you here. The value for the id attribute on the <input> is determined by ASP.NET and it is really unique, across the entire page.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.
1 Comment
<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.