Auto Calculate Sum using JavaScript with Bootstrap Template

Submitted by azalea zenith on Friday, September 30, 2016 - 11:40.

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.

<form class="form-inline">
   <div class="form-group">
      <input type="number" class="numeric_value" autofocus="autofocus">
   </div>
   <div class="form-group">
      <label>+</label>
      <input type="number" class="numeric_value">
   </div>
   <div class="form-group">
      <label>=</label>
      <input type="text" class="form-control" id="total" disabled>
   </div>
</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.

<script>
    $('.numeric_value').keyup(function() {
        var sum = 0;
        $('.numeric_value').each(function() {
            sum += Number($(this).val());
        });
        $('#total').val(sum);
    });
</script>

Output

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

Add new comment

2110 views