Click here to Skip to main content
13,088,453 members (58,260 online)
Click here to Skip to main content
Add your own
alternative version

Stats

23.5K views
468 downloads
7 bookmarked
Posted 11 Feb 2013

Addition of Multiple Values using JavaScript

, 21 Dec 2015
Rate this:
Please Sign up or sign in to vote.
Addition of multiple values using JavaScript on client side without postback

Sample Image

Introduction

This code is very useful for calculation of data on the client side without postback. This reduces the time required to provide output in an efficient manner.

Using the Code

  1. You need to copy this piece of JavaScript code under the title tag.

    <script language="javascript" type="text/javascript">
            
    //
    // This function will allow users to insert only numbers in the textboxes.
    //
    
    function onlyNumbers(evt) {
             var e = event || evt; // for trans-browser compatibility
             var charCode = e.which || e.keyCode;
    
             if (charCode > 31 && (charCode < 48 || charCode > 57))
                 return false;
             return true;
         }
    
    //
    // This function is to calculate all the values of textboxes.
    //
    
         function Add() {
             var a, b, c, d;
             a = parseInt(document.getElementById("txtFirstValue").value);
             
    //
    // If textbox value is null i.e empty, then the below mentioned if condition will 
    // come into picture and make the value to '0' to avoid errors.
    //
    
     if (isNaN(a) == true) {
             a = 0;
         }
         var b = parseInt(document.getElementById("txtSecondValue").value);
         if (isNaN(b) == true) {
             b = 0;
         }
         var c = parseInt(document.getElementById("txtThirdValue").value);
         if (isNaN(c) == true) {
             c = 0;
         }
         var d = parseInt(document.getElementById("txtFourthValue").value);
         if (isNaN(d) == true) {
             d = 0;
         }
         document.getElementById("txtTotal").value = a + b + c + d;
    }</script>
  2. Here is the HTML code:

    <table border="0" cellpadding="1" 
    
    cellspacing="1" width="400px" 
    
            style="border-right: black 1px solid; border-top: black 1px solid; 
              border-left: black 1px solid; border-bottom: black 1px solid">
        <tr>
            <td align="center" colspan="2" style="
            background-color: #ff9966" class="style2">
            <b>Program to add multiple values using JavaScript
        </tr>
        <tr>
            <td align="center" colspan="2"></td>
        </tr>
        <tr>
            <td style="width:200px" align="right">
                First Value:  
            </td>
            <td align="left" class="style1">
                <asp:TextBox ID="txtFirstValue" runat="
                server" onkeypress="return onlyNumbers();" 
    
                  onKeyUp="javascript:Add();" MaxLength="10" 
    
                  BackColor="#FFC0C0" BorderColor="White" 
    
                  Font-Size="Larger" ForeColor="Black" 
    
                  Width="148px"></asp:TextBox></td><tr>    
        <tr>
            <td align="right" style="width: 200px">
                Second Value:  
            <td align="left" class="style1">
                <asp:TextBox ID="txtSecondValue" runat="
                server" onkeypress="return onlyNumbers();" 
    
                  onKeyUp="javascript:Add();" MaxLength="10" 
    
                  BackColor="#FFC0C0" BorderColor="White" 
    
                  Font-Size="Larger" ForeColor="Black" 
    
                  Width="148px"></asp:TextBox></td>
        </tr>
        <tr>
            <td align="right" style="width: 200px">
                Third Value:  </td>
            <td align="left" class="style1">
                <asp:TextBox ID="txtThirdValue" runat="
                server" onkeypress="return onlyNumbers();" 
    
                  onKeyUp="javascript:Add();" MaxLength="10" 
    
                  BackColor="#FFC0C0" BorderColor="White" 
    
                  Font-Size="Larger" ForeColor="Black" 
    
                  Width="148px"></asp:TextBox></td>
        </tr>
        <tr>
            <td align="right" style="width: 200px">
                Fourth Value:  </td>
            <td align="left" class="style1">
                <asp:TextBox ID="txtFourthValue" runat="
                server" onkeypress="return onlyNumbers();" 
    
                  onKeyUp="javascript:Add();" MaxLength="10" 
    
                  BackColor="#FFC0C0" BorderColor="White" 
    
                  Font-Size="Larger" ForeColor="Black" 
    
                  Width="148px"></asp:TextBox></td>
        </tr>
            <tr>
                <td align="right" colspan="2">
                       
                </td>
            </tr>
            <tr>
                <td align="right" style="width: 200px">
                    Total =  
                </td>
                <td align="left" class="style1">
                    <asp:TextBox ID="txtTotal" 
    
                    runat="server" MaxLength="20" 
    
                      BackColor="#FFE0C0" Enabled="
                      False" Font-Bold="True" 
    
                      Font-Size="X-Large" Width="149px">
                      </asp:TextBox></td>
            </tr>
        <tr>
            <td align="right" colspan="2" 
    
            id="TD2" runat="server">
                    
            </td>
        </tr>
    </ table>

Points of Interest

Interesting thing is that two functions are being called for a single textbox to validate the input values:

  1. Function to validate the input values, i.e., to accept only integer values
  2. Function to calculate the values

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

mimtiyaz
Software Developer (Senior)
Saudi Arabia Saudi Arabia
Web Developer specializing in Web Design, Web Development and Web Programming

Portfolio: https://codecanyon.net/user/mimtiyaz/portfolio
Blog: http://www.ittutorials.in

You may also be interested in...

Pro
Pro

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170813.1 | Last Updated 22 Dec 2015
Article Copyright 2013 by mimtiyaz
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid