Click here to Skip to main content
Click here to Skip to main content

Addition of Multiple Values using JavaScript

, 11 Feb 2013
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

Imtiyaz_mi
Web Developer
Saudi Arabia Saudi Arabia
View more articles at http://www.ittutorials.in
Follow on   Google+

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140814.1 | Last Updated 12 Feb 2013
Article Copyright 2013 by Imtiyaz_mi
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid