Automatic Calculated Field

[Attila Hajzer]

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/

[Mottie]

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.

[Mottie]

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?

[Mottie]

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

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

[Mottie]

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.

[Mottie]

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.

[Mottie]

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

[Mottie]

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”

[Mottie]

Hiya!

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.

[Mottie]

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:

LOL nevermind.. darn OCD – check out this demo

[Mottie]

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

[Mottie]

Or set an input to “readonly”

[Mottie]

Now that “Grand-total” is an input, change the value, not the html:

$('#Grand-total').val(...);

[dude1e]

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

[Author]

Posts