treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Calculations from Form Inputs?

  • 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.
  • use jQuery's .keyup() and .val() to get the values in realtime like this http://jsfiddle.net/5xzSy/1/
  • Is it possible to kiss people over the internet?
  • 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: http://jsfiddle.net/andyunleashed/mmx5f/1 - just doesn't work locally.
  • 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!
  • 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 :)
  • Another issue I'm having is re-using the output so in;

    http://jsfiddle.net/andyunleashed/mmx5f/1/

    I want to use the Total result and recalculate for some other fields - how do I go about this?
  • 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:
    http://jsfiddle.net/UmVs2/4/
  • 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?
  • 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: :)

    http://jsfiddle.net/mortzen/UmVs2/5/
  • 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?
  • 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.
  • No worries, glad to help!
  • Hi,

    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?

    Thanks