Auto Calculate Sum using JavaScript with Bootstrap Template

[Stephanny]

In this tutorial, we are going to learn how to create Auto Calculate Sum using JavaScript with Bootstrap Template. This simple source code will help you on how to auto calculate the sum in the form field. This program will run by the user that they enter the numeric value to the TextBox after that, the sum will automatic show in the third TextBox on the web page.

Create Simple Markup

This simple HTML source code contains all the TextBox where the user can type the numeric value and the TextBox for the displaying of the sum in two numeric value.

1. <form
   
   class
   
   =
   
   "form-inline"
   
   >
   
2. <div
   
   class
   
   =
   
   "form-group"
   
   >
   
3. <input
   
   type
   
   =
   
   "number"
   
   class
   
   =
   
   "numeric_value"
   
   autofocus=
   
   "autofocus"
   
   >
   
4. </
   
   div
   
   >
   
5. <div
   
   class
   
   =
   
   "form-group"
   
   >
   
6. <label
   
   >
   
   +</
   
   label
   
   >
   
7. <input
   
   type
   
   =
   
   "number"
   
   class
   
   =
   
   "numeric_value"
   
   >
   
8. </
   
   div
   
   >
   
9. <div
   
   class
   
   =
   
   "form-group"
   
   >
   
10. <label
    
    >
    
    =</
    
    label
    
    >
    
11. <input
    
    type
    
    =
    
    "text"
    
    class
    
    =
    
    "form-control"
    
    id
    
    =
    
    "total"
    
    disabled>
    
12. </
    
    div
    
    >
    
13. </
    
    form
    
    >
    

Simple Script

This script will help you to get the auto sum of two numeric value on the web page. The important is the class name would be the same in the TextBox in the script to get the two numeric value to have an auto sum. Check the script below.

1. <
   
   script>
   
2. $(
   
   '.numeric_value'
   
   )
   
   .keyup
   
   (
   
   function
   
   (
   
   )
   
   {
   
3. var
   
   sum =
   
   0
   
   ;
   
4. $(
   
   '.numeric_value'
   
   )
   
   .each
   
   (
   
   function
   
   (
   
   )
   
   {
   
5. sum +=
   
   Number
   
   (
   
   $(
   
   this
   
   )
   
   .val
   
   (
   
   )
   
   )
   
   ;
   
6. }
   
   )
   
   ;
   
7. $(
   
   '#total'
   
   )
   
   .val
   
   (
   
   sum)
   
   ;
   
8. }
   
   )
   
   ;
   
9. </
   
   script>
   

Output

Try this simple tutorial in your computer. Kindly click the "Download Code" below to have a full source code. Thank you.

Download