javascript to calculate values in gridview

Question

4.00/5 (1 vote)

See more:

I have a gridview

ASP.NET

<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 6: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

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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-30T20:11:00

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

XML

<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>