While calculating total of gridview cell using javascript and jquery getting error

Question

I am calculating the total of GridView cells using java script and jquery . But, I am always getting this error while compiling.

The name 'total' does not exist in the current context

Inside GridView code:

<asp:TemplateField HeaderText="Header 1">
    <ItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </ItemTemplate>            
    <FooterTemplate>
        <asp:Label ID="lblTotal" runat="server" Text="Total" Font-Bold="true">
        </asp:Label>
    </FooterTemplate>            
</asp:TemplateField>
<asp:TemplateField HeaderText="Header 2" >
    <ItemTemplate>
        <asp:TextBox ID="TextBox2" runat="server" class="calculate" 
           onchange="calculate()"></asp:TextBox>
    </ItemTemplate>            
    <FooterTemplate>
        <asp:TextBox ID="total" runat="server"></asp:TextBox>
    </FooterTemplate>  

javascript and jquery code:

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" 
  type="text/javascript">
  <script language="javascript" type="text/javascript">
    function calculate()
     {
        var txtTotal = 0.00;
        //var passed = false;
        //var id = 0;

        $(".calculate").each(function (index, value) {
            var val = value.value;
            val = val.replace(",", ".");
            txtTotal = MathRound(parseFloat(txtTotal) + parseFloat(val));
        });
        document.getElementById("<%=total.ClientID %>").value = txtTotal.toFixed(2);
    }

    function MathRound(number) {
        return Math.round(number * 100) / 100;
    }

</script>

how can I solve this issue any help pls.

Answer 1

<script language="javascript" type="text/javascript">
    function Calculate() {

        var grid = document.getElementById("<%=grid.ClientID%>");
        var sum = 0;
        for (var i = 1; i < grid.rows.length; i++) {
            var Cell = grid.rows[i].getElementsByTagName("input");
            if (!Cell[4].value) {sum += 0; } else { sum += parseFloat(Cell[0].value);}
        }

        alert(sum);        
    }

</script> 



<asp:TemplateField HeaderText="Current payment" >
<ItemTemplate>
    <asp:TextBox ID="txtvalue" runat="server" Width="70px" BorderStyle="None" onkeyup="Calculate();" ></asp:TextBox>
</ItemTemplate>
<ItemStyle Width="120px" />
</asp:TemplateField>`enter code here`

Answer 2

You can't access controls inside templated controls like GridView that easily. Create some variable to hold total.ClientID so that jQuery can grab it.

In your aspx:

var totalClientID = TotalClientID;

In codebehind:

void GridView1_RowDataBound(Object sender, GridViewRowEventArgs e)
{
   if(e.Row.RowType == DataControlRowType.Footer)
   {
       TotalClientID = ((TextBox)e.Row.FindControl("total")).ClientID;
   }
}