javascript to calculate values in gridview

Question

4.00/5 (1 vote)

See more:

I have a gridview

<asp:gridview ID="Gridview1" runat="server" ShowFooter="true" CssClass="vutblrow" TabIndex="3" HeaderStyle-CssClass="vutblhdr" CellPadding="4" ForeColor="#333333" GridLines="None"  Width="25%" PagerStyle-Mode="NumericPages"





            AutoGenerateColumns="false" onrowcreated="Gridview1_RowCreated" Height="16px">
              <PagerStyle CssClass="pgr"  Height="25px" BorderStyle="Solid" />
            <Columns>
            <asp:BoundField DataField="RowNumber" HeaderText="Serial Number" />
            <asp:TemplateField HeaderText="Air/Bus/Train Fare"  onkeyup="showCal(this)">
                <ItemTemplate>
                    <asp:TextBox ID="TextBox1" runat="server" CssClass="txtBoxNormalmedium" ></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="City To">
                <ItemTemplate>
                    <asp:TextBox ID="TextBox2" runat="server" CssClass="txtBoxNormalmedium" ></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="City From">
                <ItemTemplate>
                     <asp:TextBox ID="TextBox3" runat="server" CssClass="txtBoxNormalmedium"></asp:TextBox>
                </ItemTemplate>
                <FooterStyle HorizontalAlign="Right" />
                <FooterTemplate>
                 <asp:Button ID="ButtonAdd" runat="server" Text="Add New Row"

                        onclick="ButtonAdd_Click" CssClass="btnNormalAdd" />
                </FooterTemplate>
            </asp:TemplateField>
                 <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton ID="LinkButton1" runat="server" onclick="LinkButton1_Click" CssClass="lnkbut">Remove</asp:LinkButton>
                </ItemTemplate>
            </asp:TemplateField>
            </Columns>
        </asp:gridview>

 <asp:Label ID="lblgpf14" runat="server" CssClass="lblText " Text="Total Air Fare"></asp:Label>      
 <asp:TextBox ID="txt" runat="server" CssClass="txtBoxNormalmedium" Enabled="False"  onkeyup="showCal(this)" ></asp:TextBox>

When user types in the air/bus/train fare the value should be displayed in the textbox "txt" (using the onkeyup in javacript) this textbox is outside the gridview.When the user clicks on Add new row and enters the train fare the total value must be displayed in "txt".I really have no idea on how to write a javascript for this.can someone please help me?

This is the below javascript that i tried..it keeps repeating the numbers in the textbox..

 function showCal(obj) {

    var val = document.getElementById(obj.id).value;


      if(val!='' && !isNaN(val) ){
              var prvVal = document.getElementById('txt').value;
         prvVal= (!isNaN(prvVal))?prvVal:0;
         document.getElementById('txt').value = parseInt(prvVal) + val;
      }
}
</script>

Posted 30-Oct-13 7:09am

Member 10066916

Add a Solution

Comments

Member 10066916 30-Oct-13 13:29pm

I tried it out again..this seems to be working...but when i click on remove it still shows the same value..can someone help

function showCal(obj) {

var val = document.getElementById(obj.id).value;

if(val!='' && !isNaN(val) ){
var prvVal = document.getElementById('txt').value;
prvVal= (!isNaN(prvVal))?prvVal:0;
document.getElementById('txt').value = parseInt(prvVal) + parseInt(val);
}
}
</script>

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

samit kaneriya · Answer 1 · 2013-10-30T21:11:00

Try this
------------------------

<head runat="server">

    <script src="../Script/jquery-1.6.4.js" type="text/javascript"></script>

    <title>Test Demo</title>

    <script type="text/javascript">
         function CheckNumber(e)
         {
             var charCode = (e.which) ? e.which : event.keyCode
             if (charCode > 31 && (charCode < 48 || charCode > 57))
                return false;

             return true;
         }
         function AddValue(e)
         {
             //Require jquery
             var Total=0;
             for(var i=1;0<$("#<%=Gridview1.ClientID%> tr").length-1;i++)
             {
                if($("#<%=Gridview1.ClientID%> tr:eq("+i+") input:[id*='TextBox1']").val()!="")
                {
                    Total = Total + parseInt($("#<%=Gridview1.ClientID%> tr:eq("+ i.toString() +") input:[id*='TextBox1']").val());
                }
                if(($("#<%=Gridview1.ClientID%> tr").length-2)==i)
                    break;
             }
             $("#<%=txt.ClientID%>").val(Total);
         }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="Gridview1" runat="server" ShowFooter="true" CssClass="vutblrow"

            TabIndex="3" HeaderStyle-CssClass="vutblhdr" CellPadding="4" ForeColor="#333333"

            GridLines="None" Width="25%" PagerStyle-Mode="NumericPages" AutoGenerateColumns="false"

            Height="16px" OnRowCreated="Gridview1_RowCreated">
            <PagerStyle CssClass="pgr" Height="25px" BorderStyle="Solid" />
            <Columns>
                <%--<asp:BoundField DataField="RowNumber" HeaderText="Serial Number" />--%>
                <asp:TemplateField HeaderText="Serial Number">
                    <ItemTemplate>
                        <%# Container.DataItemIndex+1 %>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Air/Bus/Train Fare">
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox1" runat="server" onkeypress="return CheckNumber(event)" onkeyup="AddValue(this)" CssClass="txtBoxNormalmedium"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="City To">
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox2" runat="server" CssClass="txtBoxNormalmedium"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="City From">
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox3" runat="server" CssClass="txtBoxNormalmedium"></asp:TextBox>
                    </ItemTemplate>
                    <FooterStyle HorizontalAlign="Right" />
                    <FooterTemplate>
                        <asp:Button ID="ButtonAdd" runat="server" Text="Add New Row" OnClick="ButtonAdd_Click"

                            CssClass="btnNormalAdd" />
                    </FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click" CssClass="lnkbut">Remove</asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:Label ID="lblgpf14" runat="server" CssClass="lblText " Text="Total Air Fare"></asp:Label>
        <asp:TextBox ID="txt" runat="server" CssClass="txtBoxNormalmedium" Enabled="False"></asp:TextBox>
    </div>
    </form>
</body>
</html>

javascript to calculate values in gridview

1 solution

Solution 1

Add your solution here

Preview 0

javascript to calculate values in gridview

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us