Javascript with ASP:TextBox inside Repeater

Question

Okay so I've got a little problem with combining my own Javascript with the ASP server controls.

The picture: I've got a couple of ASP:TextBoxes on my page who are created by a repeater. My goal is to sum all the values the user types into these textboxes. This must happen whenever the user changes something to the content of the textboxes. (On the bottom of the page I got a little price calculator, which works with server side code but I want to make it more dynamic, I'm talking about txtTeam and txtPart)

<asp:Content ID="Content3" ContentPlaceHolderID="contentPlaceHolder" runat="Server">
<script type="text/javascript"> 
</script>

<div id='inputDiv'>
    <h1>
        Students per team</h1>
    <table>
        <tr>
            <td>
                Team
            </td>
            <td>
                Actual
            </td>
            <td>
                Maximum
            </td>
        </tr>
        <asp:Repeater ID="Repeater2" runat="server" DataSourceID="odsTeams">
            <ItemTemplate>
                <tr>
                    <td id='td<%# Eval("team_id") %>'>
                        <%# Eval("name") %>
                    </td>
                    <td id='txtTeam<%# Eval("team_id") %>'>
                        <asp:TextBox ID="txtTeam" runat="server"></asp:TextBox>
                        <asp:RangeValidator EnableClientScript="true" ID="rgvTeams" runat="server" ErrorMessage="*"
                            MinimumValue="0" MaximumValue='<%# Eval("st_max") %>' ControlToValidate="txtTeam"></asp:RangeValidator>
                    </td>
                    <td id='lblTeam<%# Eval("team_id") %>'>
                        <asp:Label runat="server">
                        <%# Eval("st_max") %>
                        </asp:Label>
                    </td>
                </tr>
            </ItemTemplate>
        </asp:Repeater>
    </table>
    <asp:ObjectDataSource ID="odsTeams" runat="server" OldValuesParameterFormatString="original_{0}"
        SelectMethod="GetTeamsByDelegationID" TypeName="ERASTableAdapters.tbl_teamTableAdapter"
        OnSelecting="odsTeams_Selecting">
        <SelectParameters>
            <asp:Parameter Name="delegation_id" Type="Int32" />
        </SelectParameters>
    </asp:ObjectDataSource>
    <h1>
        Additional Participants</h1>
    <table>
        <tr>
            <td>
                Category
            </td>
            <td>
                Actual
            </td>
            <td>
                Maximum
            </td>
        </tr>
        <asp:Repeater ID="Repeater1" runat="server" DataSourceID="odsParticipantsCat">
            <ItemTemplate>
                <tr>
                    <td id='<%# Eval("participant_category_id") %>'>
                        <%# Eval("name") %>
                    </td>
                    <td id='txtPart<%# Eval("participant_category_id") %>'>
                        <asp:TextBox ID="txtPart" runat="server" Enabled='<%# getMax(Eval("key").ToString()) > 0 %>'></asp:TextBox>
                        <asp:RangeValidator EnableClientScript="true" ID="rgvPart" runat="server" ErrorMessage="*"
                            MinimumValue="0" MaximumValue='<%# getMax(Eval("key").ToString())%>' ControlToValidate="txtPart"></asp:RangeValidator>
                    </td>
                    <td id='lblPart<%# Eval("participant_category_id") %>'>
                        <asp:Label runat="server">
                        <%# getMax(Eval("key").ToString())%>
                        </asp:Label>
                    </td>
                </tr>
            </ItemTemplate>
        </asp:Repeater>
        <asp:ObjectDataSource ID="odsParticipantsCat" runat="server" OldValuesParameterFormatString="original_{0}"
            SelectMethod="GetAdditionalParticipantCategories" TypeName="ERASTableAdapters.tbl_participant_categoryTableAdapter">
        </asp:ObjectDataSource>
    </table>
</div>
<h1>
    Advance to be paid</h1>
<table>
    <tr>
        <td>
            Number of participants
        </td>
        <td>
            Days
        </td>
        <td>
            Price
        </td>
        <td>
            Total
        </td>
    </tr>
    <tr>
        <td runat="server" id="tdNumberPart1">
            0
        </td>
        <td runat="server" id="tdDays1">
            0
        </td>
        <td runat="server" id="tdPrice1">
            0
        </td>
        <td runat="server" id="tdTotal1">
            0
        </td>
    </tr>
    <tr>
        <td runat="server" id="tdNumberPart2">
            0
        </td>
        <td>
            N/A
        </td>
        <td runat="server" id="tdPrice2">
            0
        </td>
        <td runat="server" id="tdTotal2">
            0
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td runat="server" id="tdGrandTotal" style="font-weight: bold">
            0
        </td>
    </tr>
</table>
<asp:Button runat="server" ID="btnConfirm" Text="Confirm" OnClick="btnConfirm_Click"
    Style="height: 29px" />
    <asp:Label runat="server" ID="lblInfo"></asp:Label>

Answer 1

Give your tables ids, eg <table id="students"> and <table id="additional">. Then, iterate the rows, find the input element in each row, and sum the values as you go:

function sumTable(id)
{
    var count = 0;
    var studentTable = document.getElementById(id);
    for (var i=1; i in studentTable.rows; i++)
    {
        var r = studentTable.rows[i];
        var input = r.getElementsByTagName("input")[0];
        var n = parseFloat(input.value);
        if (isFinite(n)) count += n;
    }
    return count;
}
var totalParticipants = sumTable("students") + sumTable("additional");

Answer 2

Using a library like jquery you can easily select all input boxes within a particular div (say your repeater div) or you can add a class specifically to those input boxes and grab them that way.

Attach the function call to the onblur method so that when they move away from the textboxes you can sum them up.