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:
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.
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?
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?
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.
You know, you could try and experiment to see if you can figure it out ;)
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.
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
.
I’ve removed the data-tax’s and for some reason it now won’t calculate….
http://jsfiddle.net/attilahajzer/6LKht/8/
now how do i add all the sub totals to create one final total in one Table cell.
Awsome thanks!
one more thing. for some reason the subtotal doesn’t update when you add another person or type of person.
oh sweet! your sooo gooood! thank you! i will for sure come back to CSS-Tricks for any questions!
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".