Javascript calculating total in gridview

[parshupooja]

Hi
I am using asp.net C# and javascript.
I have a gridview with 5 columns and 14 row
column1--column2--column3--column4--column5

Column1 to column4 is textboxes wheresa column5 is label
I am trying to calculate column 5 which is (column2-column1)+(colum n4-column3)
Here is javascript i am using. When i use this it just calculates for first row of gridview.

<script language =javascript type="text/javascript">
                       function Total()
                               {
 
                                var int1=parseInt(document.getElementById("ctl00_contentPlaceHolder_GridView1_ctl02_TextBox1").value);
                                var int2 = parseInt(document.getElementById("ctl00_contentPlaceHolder_GridView1_ctl02_TextBox2").value);
                                var int3 = parseInt(document.getElementById("ctl00_contentPlaceHolder_GridView1_ctl02_TextBox3").value);
                                var int4 = parseInt(document.getElementById("ctl00_contentPlaceHolder_GridView1_ctl02_TextBox4").value);
                                var int5 = (int2-int1+int4-int3);
                                document.getElementById("ctl00_contentPlaceHolder_GridView1_ctl02_lblTotalHr").innerText = int5;
 }
</script>
 

i have tried using document.getEle mentById("<%=Te xtBox1.ClientID %>") and

document.getEle mentById("<%=Gr idView1.TextBox 1.ClientID%>") but throws error

plz help

[gits]

hi ...

as far as can see your script is doing what you want from it :) ... in case you have 14 rows you have to loop through you rows and call the function for every row you have ... and then you have to add all row-totals?

kind regards

[parshupooja]

your are right i need to loop thr it,but since only bolded part is changing for each control, i don't know how to do it. could show me little snippet or refer meto the article

ctl00_contentPl aceHolder_GridV iew1_ctl02_TextBox1

hi ...

as far as can see your script is doing what you want from it :) ... in case you have 14 rows you have to loop through you rows and call the function for every row you have ... and then you have to add all row-totals?

kind regards

[gits]

that is a little bit tricky and depends on how this changes ... you may use something like this:

var prefix = 'ctl00_contentPlaceHolder_GridView1_';
 
// you may pass this as a param to your function
// here i use: cp = 'ctl02'
var changing_part = cp;
 
var suffix = '_TextBox1';
 
var id = prefix + changing_part + suffix;
 
var node = document.getElementById(id);

i assume that you know how to loop through your lines ... so you call your function with the cp-param each time with a new row.

kind regards

[parshupooja]

Hello
Thank You for help but when i just test it and it shows msg null object. any clue?

var msg = "";
                                   for (var x = 1; x <= 10; x++)
                                  {
                                            var prefix = "ctl00_contentPlaceHolder_GridView1_ctl0";
                                         var changing_part = x;
                                          var suffix = "_TextBox1";
                                           var id = prefix + changing_part + suffix;
                                           var node = document.getElementById(id);
                                          javascript:window.alert(node);
 
 

that is a little bit tricky and depends on how this changes ... you may use something like this:

var prefix = 'ctl00_contentPlaceHolder_GridView1_';
 
// you may pass this as a param to your function
// here i use: cp = 'ctl02'
var changing_part = cp;
 
var suffix = '_TextBox1';
 
var id = prefix + changing_part + suffix;
 
var node = document.getElementById(id);

i assume that you know how to loop through your lines ... so you call your function with the cp-param each time with a new row.

kind regards

[gits]

i think your prefix is wrong .... it seems to contain the variable part?

kind regards

[parshupooja]

actually only value after ctl0 is increasing by one. so i am considering it as a part of prefix

so i thought x would be 1,2,........... .n and so on

string should be
ctl00_contentPl aceHolder_GridV iew1_ctlx_TextBox1


Thanks

i think your prefix is wrong .... it seems to contain the variable part?

kind regards

[gits]

hmmm ... i see ... when do you call the loop? ... it has to be after! the page is fully loaded so that the dom is ready to use ...

kind regards

[parshupooja]

Loop is in the script tag of of aspx page and i am calling this function at
Onchange event of Textboxes, thats means page is fully loaded already , it triggers only when I change value on Textboxes

<script language =javascript type="text/javascript">
                        function Total(){
 for (var x = 1; x <= 10; x++)
                                    {
                                         var prefix = "ctl00_contentPlaceHolder_GridView1_ctl0";
                                        var changing_part = x;
                                          var suffix = "_TextBox1";
                                          var id = prefix + changing_part + suffix;
                                          var node = document.getElementById(id);
}
}
</script>
 

gridview

 <asp:TemplateField HeaderText="Out">
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("MorningOut") %>' Width="50px" onChange="Total()"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
 
 

hmmm ... i see ... when do you call the loop? ... it has to be after! the page is fully loaded so that the dom is ready to use ...

kind regards

[gits]

hi ...

hmmm ... could you please post the html-code? ... when the page is rendered by the browser goto view source and post the html that relates to our problem ... so that we may have a closer look ...

kind regards