Display sum of inputs as they are entered

JavaScript
1

I have a form that is made up of a number of input boxes with class ‘assets’, and an input box at the end with an id of total_assets. I would like the total_assets input box to display the running total as I enter the amounts in the other input boxes.

This is what I have, which is giving me nothing so far. What did I do wrong here?

    
    var totalAssets = 0;

    $(".budget .assets").each.on('blur', function() {
        totalAssets += parseFloat($(this).val());
    });

   if (isNaN(totalAssets)) {
        totalAssets = '';
    }

    document.getElementById('total_assets').value = totalAssets;
2

Just a guess depending on what you mean by “giving nothing” but shouldn’t
totalAssets = '';
be
totalAssets = 0

3

Well I added that because when I first go to the page with the form and haven’t entered anything yet, the total input box contains a NaN, but I want it to stay blank until I start filling in the form. I tried it with 0 instead, and am getting nothing in the total assets input box.

As I enter amounts in the assets input boxes, the running total should be displaying dynamically in the total assets box.

4

Try this

    var totalAssets = 0;
    var total_assets_box = document.getElementById('total_assets');

    $(".budget .assets").each.on('blur', function() {
        totalAssets += parseFloat($(this).val());
        total_assets_box.value = totalAssets;
    });

   if (isNaN(totalAssets)) {
        totalAssets = '';
    }
5

small note: $(this).val() => this.value (esp. in event handlers many of the desired values are available directly through the DOM)

6

AFAIK, jQuery.each.on is not a function. I think you want this:

var $assets = $(".budget .assets"),
    $totalAssets = $('#total_assets');

$assets.on('blur', function() {
    var sum = 0;

    assets.each(function() {
        var value = parseFloat($(this).val());
        if (!isNaN(value)) sum += value;
    });

    $totalAssets.text(sum);
});
7

Why the $ in front of the variable names?

8

Personal preference. That way I know $assets and $totalAssets are jQuery instances :smile:

9

Good catch.
I hadn’t noticed that each.on was chained and only saw the loop when I blindly copy-pasted the rest.

10

Happens to the best! I bet we’ve all spent countless hours solving the silliest typos and the like!

11

So it’s not necessary? I’ve never used $ with javascript variables before.

12

It makes absolutely no difference. It’s a personal convention :slight_smile:

13

@timseverien - you had > $totalAssets.text(sum); to display the value in the #totalAssets form input box. Should that be $totalAssets.value = sum; because it is an input box? or does it make a difference? (You can tell I am really rusty with jQuery and JavaScript.)

I’m still not getting the sum showing on my form.

14

AFAIK text() does like

$( '#elem' ).text("foo");
...
<tag id="elem">foo</tag>

But because inputs are “self closing” it very well could assign the value to the value attribute.

But if you’re still not getting the sum to show, maybe not.

15

Another question: if I want a running total that will change as each amount is entered, should I not move the $totalAssets.text(sum); up into the $assets.each(function() so that it reads like this?

var $assets = $(".budget .assets"), $totalAssets = $("#total_assets");
    
    $assets.on('blur', function() {
        var assetsSum = 0;
        
        $assets.each(function(){
            var assetsValue = parseFloat($(this).val());
            if (!isNaN(incomeValue)) {
                assetsSum += assetsValue;
            }    
            //$totalAssets.value = assetsSum;
            $totalAssets.text(assetsSum);    
        });
        
    });

What else can I try to get the total to display?

16

I think the line should be: $totalAssets.val(sum);

I got that to work on a small test form - just have to try it with my large budget worksheet.

Now I know why I only use JavaScript when I need to. :frowning:

17

In JavaScript $ is considered the same as a letter of the alphabet except in regular expressions.

_ is as well (even in regular expressions).

18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.