Grow your CSS skills. Land your dream job.

Automatic Calculated Field

  • # February 19, 2012 at 2:27 pm

    Im looking to Create an automatic Field Calculator with either javascript OR jQuery. but not sure how to approach this.

    My goal is for customers to be able to input number values to text boxes that have a price, and depending on the number they have inputted into the text box to multiply that by the price.
    here’s the JS Fiddle version for it (HTML Markup only so far).

    http://jsfiddle.net/attilahajzer/6LKht/1/

    each ROW and Column has a different price you can refere to this:

    http://niagaraguidedtours.com/evening-trip/

    # February 20, 2012 at 12:12 am

    Try something like this demo.

    I tried to simplify it as much as possible. Each “included” row has a tr with a data-value with the price, for example I made the helicopter ride cost $85 (totally guessing) data-value="85".

    Then in the input rows, each row has a data-discount applied; it’s a fraction, so for adults the discount is “1″, elderly it’s “0.8″, kids “4-12″ it’s “0.5″ and free for kids 4 and under.

    Then in the last “Final Total” row, I added a data-tax value which is a tax percentage, like data-tax="8" which is applied to the sub total row to make the total.

    The script uses jQuery and first calculates the value of each package (column) by looking for ANY text in the column (so don’t put a “no” in there). Then goes through each person to calculate the subtotals.

    # February 20, 2012 at 12:45 am

    For the sub total, i just wanted the age ranges to be added up per package, then the final total for the sub total to add up to 1 grand total.

    example: //

    Lights N’ Sights Night Hawk

    adults 2 2
    Senior Citizens 0 1
    Children 4-12: 3 0
    Under 4: 0 0

    Sub Total $136.00 $476.00
    TOTAL: $612.00

    like that? is that possible.

    instead of it adding taxes, could we just have the sub totals to add up into the TOTAL ?

    you are amazing with jQuery.

    and is this considered advanced jQuery? what skill level would it be?

    # February 20, 2012 at 12:01 pm

    Hi Attilahajzer!

    Well from my perspective, it seems like pretty basic jQuery… I mean I’m really only using “find” and “each”. The rest of the code is just looping. Now, my perspective and your may be completely different.

    I’m not quite sure what you mean by what goes into the sub totals… so in your example above subtotal should be 5 and 3? Not $136 and $476?

    So, like this?

    # February 21, 2012 at 12:46 am

    well no. sub totals would calculate each package it would count the amount of people in a package, add the prices per person then, when all sub totals are calculated, the totals would be the sub totals calculated. IE//

    PACKAGE 1 PACKAGE 2
    3 people 4 people
    $50 per person $75 per person

    subtotal : $150 $300
    TOTAL : $450

    i hope this was more clear.

    # February 21, 2012 at 8:57 am

    You know, you could try and experiment to see if you can figure it out ;)

    http://jsfiddle.net/Mottie/6LKht/4/

    # February 21, 2012 at 11:55 am

    Im trying this on my own but the problem I’m having right now is I’m trying to get rid of the data tax because the tax is not needed. and when i add the sub totals up, i would only like one total which would be all of the sub totals combined. and I’m having trouble doing that.

    http://jsfiddle.net/Mottie/6LKht/5/

    # February 21, 2012 at 12:16 pm

    The link you shared doesn’t work. :(

    Anyway, the data-tax="8" is still in the HTML, but it isn’t being used. The demo I linked above should be making subtotal show the cost of one adult while the final total is showing the total cost of all people, calculated using the data-discount.

    # February 21, 2012 at 12:23 pm

    I’ve removed the data-tax’s and for some reason it now won’t calculate….

    http://jsfiddle.net/attilahajzer/6LKht/6/

    # February 21, 2012 at 12:29 pm

    Oh I see, it’s actually because all of the data-discount attributes are set to zero. Zero times anything is zero, so the script won’t show it.

    Change it to data-discount="1" for the full adult price.

    # February 21, 2012 at 1:16 pm

    http://jsfiddle.net/attilahajzer/6LKht/8/

    now how do i add all the sub totals to create one final total in one Table cell.

    # February 21, 2012 at 4:07 pm

    http://jsfiddle.net/Mottie/6LKht/9/

    # February 21, 2012 at 5:53 pm

    Awsome thanks!

    one more thing. for some reason the subtotal doesn’t update when you add another person or type of person.

    # February 21, 2012 at 6:20 pm

    yeah I thought you wanted the subtotal to only have the price for one… just change columns[j] to total[j] in the code under “display sub totals”

    # February 21, 2012 at 11:10 pm

    oh sweet! your sooo gooood! thank you! i will for sure come back to CSS-Tricks for any questions!

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".