Treehouse: Grow your CSS skills. Land your dream job.

Calculations from Form Inputs?

  • # February 28, 2012 at 5:54 pm

    Hi all,

    I’m putting together a calculator for a customer that is based on 3 user inputs that output a bunch of numbers. It needs to have multiplication, subtraction, division and addition all in one form as the output fields relate to eachother.

    I’m looking to get it setup to populate in real time as the user submits information.

    Does anyone have any scripts/ideas where to begin – I’ve obviously googled but it’s a jungle out there so some straight advice would be awesome.

    # February 28, 2012 at 6:18 pm

    use jQuery’s .keyup() and .val() to get the values in realtime like this

    # February 29, 2012 at 5:04 am

    Is it possible to kiss people over the internet?

    # February 29, 2012 at 5:58 am

    I am having trouble getting this working in local testing though, yours works fine in JS fiddle but when I do it locally in chrome it hates me.

    See my below: – just doesn’t work locally.

    # February 29, 2012 at 6:06 am

    You didn’t have the jQuery library loaded in your fiddle, once you load it up and hit run it works fine. :)

    So for your local testing, make sure you’re loading jQuery!

    # February 29, 2012 at 6:07 am

    I find it helps if you don’t forget to work the JS so it actually loads – added: $(window).load(function(){ to my js file and it works fine now :)

    # February 29, 2012 at 6:28 am

    Another issue I’m having is re-using the output so in;

    I want to use the Total result and recalculate for some other fields – how do I go about this?

    # February 29, 2012 at 6:53 am

    Basically the same way as it was done by karl in his first fiddle, but just make a variable out of the initial total sum, so you can just reuse that variable whenever you want later, kind of like this:

    # February 29, 2012 at 7:09 am

    Many thanks for putting that together – your help is very much appreciated guys!

    I’ve got the form working based on all your advice and the only thing I need to do now is get rid of “NaN” that shows up during the inputting, once all the fields are filled it disappears but is there a way to hide it during input for the user?

    # February 29, 2012 at 7:17 am

    That’s easily fixed by defaulting the value to 0 if it doesn’t have a value, i should have fixed that in my first fiddle there, but here you go: :)

    # February 29, 2012 at 7:45 am

    You are my new angel. I can’t say thanks enough for all your help on this one. It’s finished now which is awesome – though I’ve tried using .toFixed(2) to round to decimal places but it stops working if I use that – any tips?

    # February 29, 2012 at 7:49 am

    never mind – sorted out the brackets and it’s working beautifully!

    You guys have really helped me out on this one and made me realise I need to study up on Java ASAP.

    # February 29, 2012 at 8:12 am

    No worries, glad to help!

    # July 6, 2012 at 1:01 am


    Thanks to all involved in this thread, this is just what I’m after but I need to ask the following:

    How do I assign a custom value to each input title/section/field?

    I need to calculate the total (add together, as in the example code), but each input item will have a different value, not 1 – i.e some will be 1, others will be 2.5 or 3, dependent on field/question being answered in the form.

    So how can I add this predetermined custom value to the existing code, so that it will tally up the total answered fields at the end?


    # September 8, 2014 at 12:58 pm

    Great discussion and just what I was looking for!
    Andy, would you show the snippet of the code on how you’re using .toFixed(2)?
    I need to use that too and I can’t figure it out.. Thanks a bunch!

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.