How Do I Calculate Sum Of Two Numbers In Asp.Net At Client Side Using Jquery

Question

0.00/5 (No votes)

See more:

I just want to sum the two numbers using jquery and shows sum in third textbox
This is the script that i used

XML

<script type="text/javascript">
    $(document).ready(function () {
        var total = 0;
        $('txt_sick_leaves').blur(function () {

            total += parseInt(this.value);


        });

        $('txt_casual_leaves').blur(function () {

            total += parseInt(this.value);

        });
        // Update the total
        $('txt_total_leaves').val(total);
    });
</script>

This is the ASP.NET code for input the values from textbox

XML

<div class="form-group col-md-4">
                <label>Sick Leaves Allowed : </label>
                <asp:TextBox ID="txt_sick_leaves" runat="server" CssClass='form-control' ClientIDMode="Static"
                    placeholder="Number Of Sick Leaves Allowed"></asp:TextBox>
            </div>

            <div class="form-group col-md-4">
                <label>Casual Leaves Allowed : </label>
                <asp:TextBox ID="txt_casual_leaves" runat="server" CssClass='form-control' ClientIDMode="Static"
                    placeholder="Number Of Casual Leaves Allowed"></asp:TextBox>
            </div>

            <div class="form-group col-md-4">
                <label>Total Leaves Allowed : </label>
                <asp:TextBox ID="txt_total_leaves" runat="server" CssClass='form-control' placeholder="Total Leaves Allow" ClientIDMode="Static"></asp:TextBox>
            </div>

Please is there is any mistake in my code then tell me to correct it
thanks in advance for your helps

Posted 2-Sep-14 4:28am

Omkar Hendre

Add a Solution

2 solutions

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)

Rocker-Star · Accepted Answer · 2014-09-02T05:36:00

Solution 1

Try this, You have to use # for ids on jquery

C#

$(document).ready(function () {
       var total = 0;

       $('#txt_sick_leaves').blur(function () {
           updateTotal();
       });

       $('#txt_casual_leaves').blur(function () {
           updateTotal();
       });

       updateTotal();

       function updateTotal()
       {
           // Update the total
           var sick = $('#txt_sick_leaves').val() == '' ? 0 : parseInt($('#txt_sick_leaves').val());
           var casual = $('#txt_casual_leaves').val() == '' ? 0 : parseInt($('#txt_casual_leaves').val());
           $('#txt_total_leaves').val(sick + casual);
       }

   });

Posted 2-Sep-14 5:36am

Rocker-Star

Updated 5-Sep-14 0:18am

v2

Comments

Omkar Hendre 3-Sep-14 1:24am

great it works for me thanks sir thanks a lot

Omkar Hendre 5-Sep-14 0:46am

hello sir there is one problem with your code if i enters the number in a txt_sick_leaves and i remove the number form the txt_sick_leaves then txt_total_leaves is shows NaN and if i again try to add numbers then still txt_total_leaves shows NaN

Rocker-Star 5-Sep-14 6:19am

updated the solution, check it pls

Omkar Hendre 9-Sep-14 1:46am

I solve my problem thanks for your help thanks again

raju melveetilpurayil · Accepted Answer · 2014-09-02T05:53:00

add a class to the textbox what you want to add, its for to select that control form JQuery, here I added a class name addition

<div class="form-group col-md-4">
                <label>Sick Leaves Allowed : </label>
                <asp:TextBox ID="txt_sick_leaves" runat="server" CssClass='form-control addition' ClientIDMode="Static"
                    placeholder="Number Of Sick Leaves Allowed"></asp:TextBox>
            </div>
 
            <div class="form-group col-md-4">
                <label>Casual Leaves Allowed : </label>
                <asp:TextBox ID="txt_casual_leaves" runat="server" CssClass='form-control addition' ClientIDMode="Static"
                    placeholder="Number Of Casual Leaves Allowed"></asp:TextBox>
            </div>
 
            <div class="form-group col-md-4">
                <label>Total Leaves Allowed : </label>
                <asp:TextBox ID="txt_total_leaves" runat="server" CssClass='form-control' placeholder="Total Leaves Allow" ClientIDMode="Static"></asp:TextBox>
            </div>

From Jquery select by class name and add values and display in result textbox

JavaScript

$(document).ready(function () {
$(".addition").change(function(){
  var value1=$('#txt_sick_leaves').val()==''?0:parseInt($('#txt_sick_leaves').val());
  var value2=$('#txt_casual_leaves').val()==''?0:parseInt($('#txt_casual_leaves').val());
  var sum=value1+value2;
  $('#txt_total_leaves').val(sum);
});
});

JSFiddle [^]