calculating the values of textbox in a datalist using javascript : The Official Microsoft ASP.NET Forums

Reply

shabeerna200...

0 Points

calculating the values of textbox in a datalist using javascript

Apr 14, 2012 11:34 AM|LINK

Hi,

I have 3 textboxes placed in a datalist control. User shall enter numeric values in first two text box and their sum should be calculated using javascript and displayed in third textbox. There will be almost 100 or more rows in datalist.

Example of the datalist :

I have written the following code but doesn't work :

HTML Page :

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
       <script language="javascript">
                function addNumbers()
                {
                        var val1 = parseInt(document.getElementById("Calculator_ctl00_value1").value);
                        var val2 = parseInt(document.getElementById("Calculator_ctl00_value2").value);
                        var ansD = document.getElementById("Calculator_ctl00_answer");
                        ansD.value = val1 + val2;
                }
        </script>
    
</head>
<body>
    <form id="form1" runat="server">
    
    
      
    <asp:DataList ID="Calculator" runat="server" RepeatLayout="Flow">
        <ItemTemplate>
            <asp:TextBox ID="value1" runat="server" name="value1"
    onkeyup="javascript:addNumbers()" value="1"></asp:TextBox>
            <asp:TextBox ID="value2" runat="server" name="value2"
    onkeyup="javascript:addNumbers()" value="2"></asp:TextBox>
            <asp:TextBox ID="answer" runat="server" name="answer"
    ReadOnly="True"></asp:TextBox>
        </ItemTemplate>
    </asp:DataList>




    </form>
</body>
</html>

Code behind the page (VB.NET)

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            Dim dt As New Data.DataTable
            Dim dr As Data.DataRow
            For i = 0 To 100
                dr = dt.NewRow
                dt.Rows.Add(dr)
            Next

            Calculator.DataSource = dt 
            Calculator.DataBind()

        End If
    End Sub

When I run the page , the javascript doesn't calculate the value. It will be highly appriciated if anyone could help :-)

Edited by shabeerna2005 on Apr 14, 2012 11:37 AM

Reply

mm10

Contributor

6395 Points

1182 Posts

Re: calculating the values of textbox in a datalist using javascript

Apr 14, 2012 12:44 PM|LINK

Add this to your code behind:

Protected Sub Calculator_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataListItemEventArgs) Handles Calculator.ItemDataBound
        If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then

            Dim txtValue1 As TextBox = CType(e.Item.FindControl("value1"), TextBox)
            Dim txtValue2 As TextBox = CType(e.Item.FindControl("value2"), TextBox)
            txtValue1.Attributes.Add("onkeyup", String.Format("javascript:addNumbers({0})", e.Item.ItemIndex))
            txtValue2.Attributes.Add("onkeyup", String.Format("javascript:addNumbers({0})", e.Item.ItemIndex))

        End If
    End Sub

..and change your aspx to look like this:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server"> 
    <title>Untitled Page</title> 
       <script language="javascript">
           function addNumbers(index) {

               if (index < 10)
                   index = "0" + index;

               var val1 = parseInt(document.getElementById("Calculator_ctl" + index + "_value1").value);
               var val2 = parseInt(document.getElementById("Calculator_ctl" + index + "_value2").value);
               var ansD = document.getElementById("Calculator_ctl" + index + "_answer");
               ansD.value = val1 + val2;
           } 
        </script> 
     
</head> 
<body> 
    <form id="form1" runat="server"> 
    <asp:DataList ID="Calculator" runat="server" RepeatLayout="Flow" OnItemDataBound="Calculator_ItemDataBound"> 
        <ItemTemplate> 
            <asp:TextBox ID="value1" runat="server" name="value1" value="1"></asp:TextBox> 
            <asp:TextBox ID="value2" runat="server" name="value2" value="2"></asp:TextBox> 
            <asp:TextBox ID="answer" runat="server" name="answer" ReadOnly="True"></asp:TextBox> 
        </ItemTemplate> 
    </asp:DataList>  
    </form> 
</body> 
</html>

Please 'Mark as Answer' if this post helped you.

Marked as answer by shabeerna2005 on Apr 14, 2012 01:17 PM

Reply

shabeerna200...

0 Points

7 Posts

Re: calculating the values of textbox in a datalist using javascript

Apr 14, 2012 01:19 PM|LINK

Thank you. I have one more doubt.

I need to have sum of all the rows in thirdcolumn in a text box that's placed out of the datalist.

eg : let's assume that third column in the datalist has Price, I need Total Price in a text box below the datalist.

pls help !

Reply

mm10

Contributor

6395 Points

1182 Posts

Re: calculating the values of textbox in a datalist using javascript

Apr 14, 2012 05:46 PM|LINK

Try this, it uses jQuery to traverse all the textboxes when a number is changed:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TextBoxes.aspx.vb" Inherits="VbWeb.TextBoxes" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <script src="http://code.jquery.com/jquery-1.4.1.min.js" type="text/javascript"></script>
       <script language="javascript">
           function addNumbers(index) {

               if (index < 10)
                   index = "0" + index;

               var val1 = parseInt(document.getElementById("Calculator_ctl" + index + "_value1").value);
               var val2 = parseInt(document.getElementById("Calculator_ctl" + index + "_value2").value);
               var ansD = document.getElementById("Calculator_ctl" + index + "_answer");
               ansD.value = val1 + val2;


               var sum = 0;
               //Calculate the sum using jQuery
               $("input[id$='answer']").each(function () {
                   if ($(this).val() != "" && $(this).val() != "NaN")
                       sum += parseInt($(this).val());
               });

               document.getElementById("<%= txtSum.ClientID %>").value = sum;
           }
        </script>
     
</head>
<body>
    <form id="form1" runat="server">
    <asp:DataList ID="Calculator" runat="server" RepeatLayout="Flow" OnItemDataBound="Calculator_ItemDataBound">
        <ItemTemplate>
            <asp:TextBox ID="value1" runat="server" value="1"></asp:TextBox>
            <asp:TextBox ID="value2" runat="server" value="2"></asp:TextBox>
            <asp:TextBox ID="answer" runat="server" ReadOnly="True"></asp:TextBox>
        </ItemTemplate>
    </asp:DataList>
    Sum: <asp:TextBox ID="txtSum" runat="server" />
    </form>
</body>
</html>

Please 'Mark as Answer' if this post helped you.

Edited by mm10 on Apr 14, 2012 05:47 PM
Edited by shabeerna2005 on Apr 14, 2012 08:15 PM
Edited by shabeerna2005 on Apr 14, 2012 08:16 PM
Marked as answer by shabeerna2005 on Apr 15, 2012 11:22 AM

Reply

shabeerna200...

0 Points

7 Posts

Re: calculating the values of textbox in a datalist using javascript

Apr 14, 2012 08:18 PM|LINK

Thank You Very Much :-)

Edited by shabeerna2005 on Apr 15, 2012 11:22 AM

calculating the values of textbox in a datalist using javascript RSS

4 replies

shabeerna200...

calculating the values of textbox in a datalist using javascript

mm10

Re: calculating the values of textbox in a datalist using javascript

shabeerna200...

Re: calculating the values of textbox in a datalist using javascript

mm10

Re: calculating the values of textbox in a datalist using javascript

shabeerna200...

Re: calculating the values of textbox in a datalist using javascript

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft