Calculating input amounts in jQuery

Recently on a very massive and complex project that I’m working on, I needed a way to iterate through every input on the page with a specific class, add the number in the given input to an amount, and then output that amount back to the UI whenever ANY of those inputs changed. Seemed simple, and after hours of work – it looks simple. But I wanted to share my recent battle with getting it all tied together.

In this article, I’m going to go through the process (and the HTML/jQuery code) of how to get a task like this done.

The Scenario:

You have many inputs on the page, some added dynamically to the DOM, some already existing on page load.

<input type="text" class="amount" value="">

That’s the element you’ll be working with mainly – simple, yes. You also have a single <span> in which you want to update the value of your total amount (calculate in the loop down a bit further).

<span id="totalAmount">0</span>

Looping through all instances of the element

In the scenario, we’ll have 2 or more instances of the above element, but we need a way to listen in on when there are numbers typed into those inputs.

$('.amount').on('input', function() {
    calculateAmount();
});

This will trigger a function (we’ll build later) every time a new amount is entered into any of the ‘.amount’ inputs.

What the Function

Let’s create a function that will hold our logic. This function is also eligible to be attached to any event listener of your choice, though as above, we’re listening for when any of our target inputs change.

function calculateAmount() {
    var itemPrice = 0;
    var amntInput = $(".amount"); 
}

Notice that we’re creating two variables: itemPrice and amntInput.


itemPrice is our placeholder variable in which we’ll add each input’s amount to.
amntInput is the DOM element we’re working with. It’s easier and cleaner to use a var for this in case we decide to change what we’re targeting in the future.

Loop through our inputs

We’ll need to loop through all of our targeted inputs. jQuery provides a nice API in order to do this:

$( amntInput ).each(function() {
});

In our case, the .each() function iterates through every element in our DOM with the class of amount. This is a simple loop found in many programming languages.

Find inputs with amounts

Now that we have the base of our loop, for our proposes we only want to interact with inputs that have an amount entered, this is done via simple val() check:

if ( $(this).val() ) {
}

In jQuery, ‘this’ is considered a DOM element when you are inside of a callback function. For example, being called by the click(), each(), change() methods (for a deeper dive, check out this link). By doing a true/false check against the element’s value by using .val() we can now work with each input within our loop that has a value.

Things start adding up

We have our loop, a check to ensure we only get inputs with a value. Now we can take those values and add them up.

itemPrice += parseFloat( $(this).val() );

This gets the value of every loop’s input element, adds it to the ‘itemPrice‘ variable, and ensures that we’ve set the variable to be floating point number with parseFloat(), ensuring that we can work with it as a number. The += is a neat little trick to add a variable to itself (where the left side MUST be a variable).

Put the puzzle together

We’ve got all of our logic laid out and the concept. Let’s put together our final loop, we’ll also cover the bit that updates the UI to reflect our total calculated amount.

$( amntInput ).change(function() {

    $( amntInput ).each(function() {

        if ( $(this).val() ) {
            itemPrice += parseFloat( $(this).val() );
        }

    });

    $("#totalAmount").html( itemPrice );

});

As you can see, we’ve now got our <span id="totalAmount"> that we defined above getting updated every time any of our related amount inputs change.

Ready to see it all in action? https://codepen.io/Alicki/pen/bzeKmV that is a working example of what we’ve done above.

adam Written by:

Be First to Comment

Leave a Reply