Sum of values in input fields grouped by class attribute using jQeury

Posted by Arvind K. in Javascript, jQuery on Sep 30, 2011

Here is the jQuery way to calculate the sum of all values stored in input fields grouped by class “.subtotal”. In this example the sum will be shown as an alert as soon as you leave a field after entering some numeric value in it (captured as an onblur event).

$('.subtotal').blur(function () {
var sum = 0;
$('.price').each(function() {
sum += Number($(this).val());
});

alert(sum); //it will alert sum when you leave  a field (captured as an onblur event).
});

Possibly Related posts:

jQuery way to limit input characters using javascript substring function
It’s an example of useful jQuery way to limit user entering a maximum set number of character in your input fields. Example makes use of...
How to prevent parent’s onclick event from firing when a child tag is clicked with jquery?
Generally, Javascript events bubble (listen) to the highest point in the DOM to which a click event had been attached. So even if you don’t...
Field type tinyint(1) would not save values other than 0 and 1 in CakePHP
Just a quick note. I had a “is_active” field in my users table which i had been using to store boolean 0 and 1 values....
How to position a pop up element on mouse position coordinates with jquery
Here is a simple yet useful trick to position a tooltip (a div element etc) near the mouse click or pointer position using jQuery. In...
A note on DOM elements’ changed scope when using thickbox with jQuery
A similar situation may arise (atleast for me it did) when you try to invoke jQuery’s “thickbox” in conjunction with a custom onclick firing. I...