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 :
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 :-)
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
shabeerna200...
0 Points
7 Posts
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) NextCalculator.DataSource = dt Calculator.DataBind() End If End SubWhen I run the page , the javascript doesn't calculate the value. It will be highly appriciated if anyone could help :-)
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>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 !
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>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 :-)