• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

Simple ASP.NET question

Bulldog13

Bulldog13

Golden Member
Good morning Programm forum!

I have 3 textboxes, 1 of which is databound to a field which displays an integer. How do I sum the contents of the 3 boxes, in real time, using ASP.NET without a postback? I know how to do it in straight JavaScript, but I can't seem to figure out how to do it in ASP.Net.

So I have a 1, 1, 3 in my first 3 textboxes then the final box would be 5. If I change it to 2,1,3 that the last box would read 6 instantly. Is this possible in ASP.NET?
 
ASP.NET is a server side model. Even if you were to use AJAX, you'd still need to go to the server. I guess I don't quite understand your problem...

Seems like JavaScript is the best solution. Why postback?
 
My problem is simply this:

3 textboxes - 1 of these is databound in ASP.Net. So it will always display an unchangeable number

Final textbox - it sums up the value of the previous 3 textboxes

How can I make it so the final textbox's value changes instantly whenever one of the previous 2 textboxes values change.

I mention postback because I can do it, if I drop in a button or something, but I don't want the user to have to refresh the page. I just want it done in real time.
 
Even if one of the textboxes was databound and I presume made disabled/readonly to prevent changing, you can still use Javascript on the client side to combine the results of the 3 boxes.

If you wanted to access that result on the server .Net you will require a postback, either normal or async postback.
 
If the values of the boxes change only on postback, then there is no problem summing up and setting the values of the last one on postback. But if the user (or script) can change the value of any of them on the client-side, and you don't want to postback to bring the sum up to date, then you have to update it with javascript.
 
Originally posted by: Markbnj
If the values of the boxes change only on postback, then there is no problem summing up and setting the values of the last one on postback. But if the user (or script) can change the value of any of them on the client-side, and you don't want to postback to bring the sum up to date, then you have to update it with javascript.
Click to expand...

It is a part of a calculator tool, so for the server won't need to touch the textbox until the final form is submitted (postback anyways, so that part is fine).

I was hoping there was a way to do it using just ASP.NET and not embedding JavaScript. Will try embedding JavaScript and post back.
 
You don't need Ajax for this if it's just one simple web page. Far too many people just throw in the buzz word without first thinking if they truly need it, and if the costs of having JS libs are outweighed by the benefits Ajax provides.
 
Ajax is only valuable when the server is required to do some processing or provide new data, and you don't want to refresh the page.

The OP's requirements clearly call for a javascript solution. Whether it might benefit from Ajax techniques as well depends on whether the requirements extend beyond what we've heard about so far.
 
Ok, here is the latest attempt with ASP.NET and inserting some JavaScript.

<asp:TextBox onKeyDown="add();" ID="txt1" runat="server" Width="50px"></asp:TextBox>
<asp:TextBox onKeyDown="add();" ID="txtDB" runat="server" Width="50px" ReadOnly="True">
<asp:TextBox onKeyDown="add();" ID="txt2" runat="server" Width="50px"></asp:TextBox>
<asp:TextBox ID="txtTotal" runat="server" Width="50px"></asp:TextBox>

Here is my JavaScript :

<script language="javascript" type="text/javascript">
// <!CDATA[

function add() {

document.getElementById("<%= txtTotal.ClientID %>").text =
parseFloat(document.getElementById("<%= txt1.ClientID %>").value) +
parseFloat(document.getElementById("<%= txtDB.ClientID %>").value) +
parseFloat(document.getElementById("<%= txt2.ClientID %>").value);


}

// ]]>
</script>

I am getting compile time errors saying txt1, txt2, txtDB, and txtTotal are "Name 'txt1' is not declared" even though I do have those controls with those ID s in my usercontrol.
 
Few mistakes:

<asp:TextBox onKeyDown="add();" ID="txtDB" runat="server" Width="50px" ReadOnly="True"></asp:TextBox> <---- you missed the closing tag

and the Javascript (.value not .text):

document.getElementById("<%= txtTotal.ClientID %>").value =
parseFloat(document.getElementById("<%= txt1.ClientID %>").value) +
parseFloat(document.getElementById("<%= txtDB.ClientID %>").value) +
parseFloat(document.getElementById("<%= txt2.ClientID %>").value);
 
Originally posted by: Snapster
Few mistakes:

<asp:TextBox onKeyDown="add();" ID="txtDB" runat="server" Width="50px" ReadOnly="True"></asp:TextBox> <---- you missed the closing tag

and the Javascript (.value not .text):

document.getElementById("<%= txtTotal.ClientID %>").value =
parseFloat(document.getElementById("<%= txt1.ClientID %>").value) +
parseFloat(document.getElementById("<%= txtDB.ClientID %>").value) +
parseFloat(document.getElementById("<%= txt2.ClientID %>").value);
Click to expand...

Thanks for responding. In the actual code I have the closing tags, and it still doesn't work setting it to .value.

 
This is a quick example I tested with, using your code which works: I will add that you'll get a NaN (not a number error) first time round with your Javascript as you do not test for empty textboxes, enter all your numbers and type in a new number in the first box to see what I mean.

<%@ Page Language="C#" %>
<html>
<head></head>
<body>

<form id="MyForm" runat="server">

<asp:TextBox onKeyDown="add();" ID="txt1" runat="server" Width="50px"></asp:TextBox>
<asp:TextBox onKeyDown="add();" ID="txtDB" runat="server" Width="50px" ReadOnly="True" Text="2"></asp:TextBox>
<asp:TextBox onKeyDown="add();" ID="txt2" runat="server" Width="50px"></asp:TextBox>
<asp:TextBox ID="txtTotal" runat="server" Width="50px"></asp:TextBox>

</form>

<script language="javascript" type="text/javascript">
// <!CDATA[

function add() {

document.getElementById("<%= txtTotal.ClientID %>").value =
parseFloat(document.getElementById("<%= txt1.ClientID %>").value) +
parseFloat(document.getElementById("<%= txtDB.ClientID %>").value) +
parseFloat(document.getElementById("<%= txt2.ClientID %>").value);


}

// ]]>
</script>
</body>
</html>
 
Thanks!

Unfortunately, it doesn't work over here.

It should be noted my stuff is inside of a Form View inside of a Web User Control (.ascx) which is inside of a .aspx .
 
Ah, I see. In that case the compiler will not be able to find your controls as they reside within the user control, thus it will say 'not declared' as it's out of scope. You'll need to place the JS within the user control and it'll be within the same scope to access the ClientID of the textboxes. Also a formview is a bound control itself, the items within only get created as child controls so you'll have to change your JS to something like:

function add() {

document.getElementById('<%= FormView1.FindControl("txtTotal").ClientID %>').value =
parseFloat(document.getElementById('<%= FormView1.FindControl("txt1").ClientID %>').value) +
parseFloat(document.getElementById('<%= FormView1.FindControl("txtDB").ClientID %>').value) +
parseFloat(document.getElementById('<%= FormView1.FindControl("txt2").ClientID %>').value);

}
 
You really should have the .ascx generate and include the necessary js API for the containing form to call. Otherwise you get an implicit coupling between the control and container.
 
Originally posted by: Snapster
Ah, I see. In that case the compiler will not be able to find your controls as they reside within the user control, thus it will say 'not declared' as it's out of scope. You'll need to place the JS within the user control and it'll be within the same scope to access the ClientID of the textboxes. Also a formview is a bound control itself, the items within only get created as child controls so you'll have to change your JS to something like:

function add() {

document.getElementById('<%= FormView1.FindControl("txtTotal").ClientID %>').value =
parseFloat(document.getElementById('<%= FormView1.FindControl("txt1").ClientID %>').value) +
parseFloat(document.getElementById('<%= FormView1.FindControl("txtDB").ClientID %>').value) +
parseFloat(document.getElementById('<%= FormView1.FindControl("txt2").ClientID %>').value);

}
Click to expand...

DING DING DING !!

We have a winner!

Snapster et al, thanks for all of the help. I am new to ASP.NET, but have to develop in it, so expect a steady trickle of questions.

 
You must log in or register to reply here.

TRENDING THREADS

Back
Top