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).
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.
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?
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
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.
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.
Instead of the data values in the TR i would like them in the inputs because the prices vary per person/age group per package. so it would be like this:
Price = $25 Default-Val (num of people per age range per package) = 0 newVal = _____
Yeah I was trying to avoid having a value for each input... I figured there was a standard discount for each age group which is why I initially set up the table with a discount percentage to reduce the value.
Sure it's possible to calculate it off of each input, it's a lot more troublesome because you have to do everything backwards - I mean, start from the input values and then check to see if it's included in the column...
I don't want to sound mean, but I'm really just here to help you with questions, not do all of the work for you. And I don't know much about Wordpress plugins, but this might be too specific, but it can't hurt to look.
I've been looking but have not found anything well enough.
so I've decided to try a new approach which i believe would be a LOT less code and more efficient.
I'm thinking with drop down menu (option boxes) you would select the Package then then separate option boxes where they can choose how many adults, seniors children and infants, with separate prices attached and in the end they will be able to calculate that.
and Mottie. I truly do appreciate everything. i really do. you've been fantastic, and i agree you shouldn't do everything. so I'm going to do my best to do it myself.
I've tried this for packages but that didn't work..
<script type="text/javascript">
</script>
I am trying to do:
if day = selected then display day packages elseif night = selected then display night packages else display day packages end if.
I've read the article for dynamically adding content to a drop down.
and going to continue to figure out how to do it :). wish me luck.
Cool! I'm still happy and willing to help you debug code, or even give hints.
If you want to change the options in a select list, you'll need to add and remove the options. IE doesn't work well if you just hide them. So you can do something like this code:
okay so the only problem I'm having is displaying the price after submit.
I've set up all other fields for when filling out the form and submitting, everything shows up. but the final price. i think its because its not in some sort of FORM input or object, rather its in a span.
when you click submit i want it to go straight to an email. how do i get it to do that without opening some sort of mail client
lets first tackle the displaying the final price if we can.
The last demo you shared had a final total, but no box and I wasn't sure what price was supposed to go in there. Just add a span and then do whatever calculation you need to get the final total, then add it to the html.
The email question is a bit out of my league... I'm guessing you're using Wordpress or something so you'll have to ask a separate question for that
Do you want the email to send automatically in the background? or open an email and populate it with the data? I sure hope you aren't collecting credit card info by email
If its to send in the background I would post the data to a php script to generate the email and send it
I just talked to my boss and he said that instead of sending through email, they want it to upload to a database. I'm not sure how to do that, where can i learn how to do that?
You'll need to post the data from your fields to a PHP script on your server To keep up with the Ajax you have I'd use this http://api.jquery.com/jQuery.post/
I really like the automatic calculated fields,what I am trying to figure out now though as I am more used to php is how to add the calculated values into a database,has that been done with this script,what I am shooting for is a cart with subtotals and totals,also seems to be rare to see those in invoices unless you buy them which is why I am teaching myself how to add calculations to these forms and input the info as needed to database,if anyone has played around with these calculations to add to database would love to see their work so I can learn from it or expand on it,great work though I love this site,great stuff
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/
I tried to simplify it as much as possible. Each "included" row has a tr with a
data-valuewith 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.
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?
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?
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.
http://jsfiddle.net/Mottie/6LKht/4/
http://jsfiddle.net/Mottie/6LKht/5/
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 thedata-discount.http://jsfiddle.net/attilahajzer/6LKht/6/
data-discountattributes 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.now how do i add all the sub totals to create one final total in one Table cell.
one more thing. for some reason the subtotal doesn't update when you add another person or type of person.
columns[j]tototal[j]in the code under "display sub totals"http://jsfiddle.net/attilahajzer/6LKht/
I have just realized that I will need to know the package names, the types of people (adult, senior, child, infant) as well as how many.
Ontop of that , it needs to be sent to an email?
I hope I'm still going about this project properly.
Instead of the data values in the TR i would like them in the inputs because the prices vary per person/age group per package.
so it would be like this:
Price = $25
Default-Val (num of people per age range per package) = 0
newVal = _____
subTotal = Price * newVal
grandTotal = addedSubtotals
the prices are already in the inputs.
would that be okay?
Yeah I was trying to avoid having a value for each input... I figured there was a standard discount for each age group which is why I initially set up the table with a discount percentage to reduce the value.
Sure it's possible to calculate it off of each input, it's a lot more troublesome because you have to do everything backwards - I mean, start from the input values and then check to see if it's included in the column...
I don't want to sound mean, but I'm really just here to help you with questions, not do all of the work for you. And I don't know much about Wordpress plugins, but this might be too specific, but it can't hurt to look.
so I've decided to try a new approach which i believe would be a LOT less code and more efficient.
I'm thinking with drop down menu (option boxes) you would select the Package then then separate option boxes where they can choose how many adults, seniors children and infants, with separate prices attached and in the end they will be able to calculate that.
http://jsfiddle.net/attilahajzer/Dw9LU/3/
do i use an array?
ill search anyways.
and Mottie. I truly do appreciate everything. i really do. you've been fantastic, and i agree you shouldn't do everything. so I'm going to do my best to do it myself.
I've tried this for packages but that didn't work..
I am trying to do:
if day = selected
then display day packages
elseif
night = selected
then display night packages
else
display day packages
end if.
I've read the article for dynamically adding content to a drop down.
and going to continue to figure out how to do it :). wish me luck.
If you want to change the options in a select list, you'll need to add and remove the options. IE doesn't work well if you just hide them. So you can do something like this code:
LOL nevermind.. darn OCD - check out this demo
I've set up all other fields for when filling out the form and submitting, everything shows up. but the final price. i think its because its not in some sort of FORM input or object, rather its in a span.
when you click submit i want it to go straight to an email. how do i get it to do that without opening some sort of mail client
lets first tackle the displaying the final price if we can.
http://jsfiddle.net/attilahajzer/m6e2y/6/embedded/result/
The email question is a bit out of my league... I'm guessing you're using Wordpress or something so you'll have to ask a separate question for that
If its to send in the background I would post the data to a php script to generate the email and send it
If you want to open up a new mail check out this script http://jscode.com/generators/mailto_generator.shtml
and
could we get the final total into a input box, that can't be changed? or is there another alternative of some sort?
http://jsfiddle.net/attilahajzer/m6e2y/7/
Here's the playlist for database access
http://www.youtube.com/playlist?list=PLB61A9CE1D911FF70&feature=plcp
You'll need to post the data from your fields to a PHP script on your server
To keep up with the Ajax you have I'd use this
http://api.jquery.com/jQuery.post/
I really like the automatic calculated fields,what I am trying to figure out now though as I am more used to php is how to add the calculated values into a database,has that been done with this script,what I am shooting for is a cart with subtotals and totals,also seems to be rare to see those in invoices unless you buy them which is why I am teaching myself how to add calculations to these forms and input the info as needed to database,if anyone has played around with these calculations to add to database would love to see their work so I can learn from it or expand on it,great work though I love this site,great stuff