Autocalculate Textboxes using Java script in Asp.Net

Question

0.00/5 (No votes)

See more:

Hey guys, I am stuck with this problem. All I want is to do some mathematical operations among textboxes and display that result in another textbox. Operations include addition, subtraction and % calculation. I started with this code using JavaScript, but could not make it automatically display the calculated result in TextBox1 (result of addition of TotalFeesPaidTextbox and AmountReceivedTextbox) when user put cursor/highlights on TextBox1. Please have a look and help me; I appreciate it.

ASP.NET

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm7.aspx.cs" Inherits="Application.WebForm7" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script language="javascript" type="text/javascript">

    function sumCalc() {
        var _txt1 = document.getElementById('<%= TotalFeesPaidTextBox.ClientID %>');
        var _txt2 = document.getElementById('<%= AmountReceivedTextbox.ClientID %>');
        var _txt3 = document.getElementById('<%= TextBox1.ClientID %>');
        var t1 = 0, t2 = 0;

        if (_txt1.value != "") t1 = _txt1.value;
        if (_txt2.value != "") t2 = _txt2.value;

        _txt3.value = parseInt(t1) + parseInt(t2);
    }
</script>


<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:TextBox ID="TotalFeesPaidTextBox" runat="server">
<asp:TextBox ID="AmountReceivedTextbox" runat="server"  onkeyup ="sumCalc" AutoPostBack="True">
<asp:TextBox ID="TextBox1" runat="server">

Posted 14-Aug-12 12:19pm

Slacker89

Updated 14-Aug-12 12:42pm

AspDotNetDev

v5

Add a Solution

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)

virang_21 · Accepted Answer · 2012-08-14T14:54:00

Solution 1

call your javascript function onblur so when cursor leave AmountReceivedTextBox it will call the function.

ASP.NET

<asp:textbox id="AmountReceivedTextbox" runat="server" onblur="javascript:sumCalc();" xmlns:asp="#unknown">
</asp:textbox>

Posted 14-Aug-12 14:54pm

virang_21

Comments

Slacker89 15-Aug-12 0:28am

Hey ..Thanks for your solution dude..It worked well. How can I make those textboxes not to accept negative values (like showing some alert)and also how to make that work for decimal values too..(like 12.9+11.1 =24.0). Thanks once again

virang_21 15-Aug-12 0:45am

you can add a regular expression validators on textboxes or just check it in your javascript function call for -ve values. if(t1<0) {alert("total fees cannot be negative."); } . For decimal values change your parseInt to parseFloat()

Slacker89 15-Aug-12 18:01pm

Thanks a lot buddy . It helped a lot. Do you mind answering my small query? I want to have a textbox "LocalMatch Budget" that works based on percentage textbox multiplied to TextBox1. Percentage is another textbox with default value to 30% but it should allow user to change to his own % if user wants. If user dint change that percentage textbox then calculations for LocalMatch textbox should be done like (0.3*TextBox1)or if user changes percentage to some 50% then it should be (0.5*TextBox1). How should I proceed for this ? Appreciate your patience.
Note : Here TextBox1 is the obtained result for my first query

Slacker89 15-Aug-12 18:44pm

hey thanks anywayz. I made it work by using default value and if condition in javascript function for that particular box to be equal to entered value else it takes default value (30%) and does the calculation for me. Thanks buddy.