Adding up values of multiple inputs

Question

I am trying to get the value from a bunch of input text fields on a form, then check whether or not they add up to 100. I am using the below jQuery to do this, though I just get "NaN" returned - anyone know why this is? No Doubt something stupid I've missed(!)

var formPercentageTotal = 0;
var currentVal = 0;
setInterval(function(){
    $('.percentage-validate input.three-digit').each(function(){
        currentVal = $(this).val();
        currentVal = parseInt(currentVal);
        formPercentageTotal = formPercentageTotal + currentVal;
    });
    $('.percentage-validate .percentage-current').text(currentVal);
}, 500);

JSFiddle

I suspect that you are trying to use parseInt on a value that is not a number - try to inspect each value in each iteration and validate that you are indeed dealing with numerical values. — Lix
– Lix, Commented Jul 3, 2014 at 8:34
That makes it obvious, you get NaN only when any field is empty, that means you are not checking whether a number is there before adding it. When all your textboxes have proper numbers the result is good. Rest you can solve yourself cause you can program good :) — Hanky Panky
– Hanky Panky, Commented Jul 3, 2014 at 8:43

Selvaraj M A · Accepted Answer · 2014-07-03 08:44:56Z

3

Try checking for NaN before adding up. You might have entered a alpahabet in any of the input field. Fiddle

Edit: You should set formPercentageTotal into .formPercentageTotal.

var formPercentageTotal = 0;
var currentVal = 0;
setInterval(function(){
    $('.percentage-validate input.three-digit').each(function(){
        currentVal = $(this).val();
        currentVal = parseInt(currentVal);
        if (!isNaN(currentVal)) {
           formPercentageTotal = formPercentageTotal + currentVal;
        }
    });
    $('.percentage-validate .percentage-current').text(formPercentageTotal);
}, 500);

edited Jul 3, 2014 at 8:44

answered Jul 3, 2014 at 8:34

Selvaraj M A

3,1363 gold badges32 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

wickywills Over a year ago

Still getting the same result (NaN). I am completing the input fields myself, and am only entering numbers

Selvaraj M A Over a year ago

Can you setup a fiddle?

kamesh Over a year ago

@wickywills better provide fiddle

wickywills Over a year ago

Fiddle added - please see original post

wickywills Over a year ago

Close, but in your fiddle, the total value keeps going up on every timer interval even if I only enter a single value in one field

|

Eternal1 · Accepted Answer · 2014-07-03 10:11:25Z

The question is already answered, but there are some things about your code, that make it inefficient and quite error-prone. Consider this piece of code:

$.fn.boundForm = function(options) {

    var defaults = {
        fields: ".three-digit",
        total: ".percentage-current",
        validateInput: function(item) {
            item.value = parseInt(item.value.replace(/[^0-9]+/g, "")) || 0;
            return parseInt(item.value);
        },
        calculateTotal: function(fields) {            
            return fields.toArray().reduce(function(sum, item) {
                return sum + this.validateInput(item);
            }.bind(this), 0);
        },
        refresh: function(form) {
            form.find(this.total).text(this.calculateTotal(form.find(this.fields)));
        }
    }


    var o = $.extend({}, defaults, options);

    this.each(function() {
        var $form = $(this);    
        $form.on("input", o.fields, function() {
           o.refresh($form);
        });

        o.refresh($form);
    });
};

$(".percentage-validate").boundForm();

This is a basic widget, that does the same thing as your code, but:

It includes validation method validateInput, that replaces any non-numbers, and return 0 if value is empty;
It doesn't require 'dirty checking' every time interval to determine if value has changed, so it is more efficient;
It is reusable - if you need to calculate some other values elsewhere - you can easily do so just by passing an object containing different selectors, methods, and whatever, and it would still work just fine, and you'd need to simply call $("#myContainer").boundForm(myOptions);

All in all, that makes for much more convenient code to work with. Hope that helps.

P. S. Here's fiddle

Thanks very much for this, much better way to do it! I'm actually already now forcing only numbers to be in the input field using something similar to the regex in your code. I think I might get rid of my setInterval though as you suggest. Much better way. +1 :)

Collectives™ on Stack Overflow

Adding up values of multiple inputs

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related