jQuery: Calculate Sum Of all Textbox Values In a Table Column

jQuery sum of all textbox values: This article explains how to calculate the total of all textboxes values in a table column. Inshort on text change event, we calculate the sum of all input values entered in the table column, i.e., whenever the user enters any values or modifies the value to any of the given textbox will calculate and display the total sum of it. Javascript supports arithmetic operators like addition, subtraction, multiplication, division and so on. But arithmetic operators are used to performing arithmetic on numbers only. In HTML, the data we read is in string format, so we can’t perform the mathematical operation on it. To calculate textbox values first, we need to convert it datatype, i.e., from string to numeric. Using parseInt or parseFloat, we can convert strings into numeric. The parseInt() function parses a string and returns an integer whereas the parseFloat() function parses a string and returns a floating point number. I like to use parseFloat instead of parseInt because there might be chances where the user enters decimal values, and we need to calculate it. So it’s better to use parseFloat() as is work like a charm for both the integer and the decimal values.

Example :

---

Let’s head to the step by step coding part.

1.  Add HTML Markup
2.  jQuery code:
   • Bind textbox change event
   • Calculate sum of all textboxes

---

# Add HTML: Textbox and HTML Table added.

Here first we add a HTML table which contains two column 1st as name and 2nd as price. In the price column we added Textboxes and also, assign a specific class name to it .i.e class=”txtCal” in our case. Class name txtCal used as jquery selector to get all textboxes value for calculating purpose. Here’s how our HTML looks like

 //*
<table id="myTable">
<tr>   <th width="100">Name </th>
    <th>Price</th>
</tr>
<tr>
    <td><span>Pen :</span></td>
    <td><input type="text" class='txtCal' /></td>
</tr>    
<tr>
    <td><span>Pencil :</span></td>
    <td><input type="text" class='txtCal' /></td>
</tr>  
<tr>
    <td><span>Eraser :</span></td>
    <td><input type="text" class='txtCal' /></td>
</tr>  
<tr>
    <td><span>Sharpner :</span></td>
    <td><input type="text" class='txtCal' /></td>
</tr>  
<tr>
    <td><span>Book :</span></td>
    <td><input type="text" class='txtCal' /></td>
</tr>
<tr>
    <td><span><b>TOTAL  :</b></span></td>
    <td><b><span id="total_sum_value"></span></b></td>
</tr>
</table>
//*

---

# jQuery Code: Bind Textbox Change Event

In jquery for click event we use .click(), for text change event we can achieve it with multiple event .i.e using .blur() / .focus() / keyUp() / keyDown() etc . But the best way is to use  like .input. So now we write code on how to bind jquery event on the dynamically added element, i.e., binding textbox change event. This is how our code looks like.

 //*
$(document).ready(function () {
       
    $("#myTable").on('input', '.txtCal', function () {
       // code logic here
        var getValue=$(this).val();
        console.log(getValue);
    });

 });
//*

 

---

# jQuery code: Calculate the sum of all textboxes.

Now it’s time to the main part of this article where we are going to calculate the sum of all the textboxes and sets its final amount at table footer. First, we make a loop over the table row using .each() to get the value of each textbox. Then we check whether the entered values are numbers only using isNumeric(). Is the entered value is numeric then only will add it our variable (calculated_total_sum). Now we set the calculated_total_sum  value to Table footer which gives us the Total sum of all the textboxes.

 //*
$(document).ready(function () {
       
    $("#myTable").on('input', '.txtCal', function () {
       var calculated_total_sum = 0;
     
       $("#myTable .txtCal").each(function () {
           var get_textbox_value = $(this).val();
           if ($.isNumeric(get_textbox_value)) {
              calculated_total_sum += parseFloat(get_textbox_value);
              }                  
            });
              $("#total_sum_value").html(calculated_total_sum);
       });
  });
//*

Try it Yourself »

Output: This is how we get the total sum of all our textboxes value using jquery. Here’s the output to the display total amount of product at HTML table footer with jquery. You can also check these articles:

1. Preview Image before upload it with jQuery in Asp.net.
2. How to get the filename, size, type count in jQuery [input file, File Api].
3. Create dynamic HTML table using jquery.
4. How to remove table row tr in jquery on button click.
5. Jquery: How to disable Button, Div, Anchor tag.

Hope you enjoyed this tutorial. If you have any recommendations, please let us know what you think in the comment section below! See you again next time!