**jQuery calculate 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.**

- Add HTML Markup
- 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);
});
});
//*
```

**Conclusion: **This is how we get the total sum of all our textboxes value using jQuery. We use jQuery input event and use parseFloat to ensure number values gets calculated.

**You can also check these articles:**

Post Comment

Your email address will not be published. Required fields are marked *