CSS-Tricks

attilahajzer

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.

attilahajzer

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?

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?

attilahajzer

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.

Mottie

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

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

attilahajzer

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/

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.

attilahajzer

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

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

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.

attilahajzer

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

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

Mottie

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

attilahajzer

Awsome thanks!

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

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"

attilahajzer

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

attilahajzer

I have another Question!

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.

attilahajzer

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <th>Whats Included</th>
        <th>Lights N' Sights</th>
        <th>Night Venture</th>
        <th>Falls View Lights</th>
        <th>Night Hawk</th>
        <th>Evening Tourist</th>
        <th>Evening Overnighter</th>
    </tr>
    <tr align="center" data-value="25">
        <td align="left">Historic Niagara On The Lake</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
    </tr>
    <tr align="center" data-value="15">
        <td align="left">Historic Queenston Village</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
    </tr>
    <tr align="center" data-value="15">
        <td align="left">Niagara Parks Sight</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
    </tr>
    <tr align="center" data-value="85">
        <td align="left">Niagara Helicopter Ride</td>
        <td></td>
        <td></td>
        <td></td>
        <td>a</td>
        <td>a</td>
        <td></td>
    </tr>
    <tr align="center" data-value="15">
        <td align="left">Clifton Hill Tourist Shops</td>
        <td>a</td>
        <td>a</td>
        <td></td>
        <td>a</td>
        <td></td>
        <td>a</td>
    </tr>
    <tr align="center" data-value="45">
        <td align="left">Sheraton Fallsview Hotel Buffet</td>
        <td></td>
        <td></td>
        <td>a</td>
        <td></td>
        <td>a</td>
        <td></td>
    </tr>
    <tr align="center" data-value="15">
        <td align="left">Niagara Falls Natural Wonder</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
    </tr>
    <tr align="center" data-value="15">
        <td align="left">Journey Behind the Falls</td>
        <td></td>
        <td>a</td>
        <td></td>
        <td></td>
        <td>a</td>
        <td></td>
    </tr>
    <tr align="center" data-value="5">
        <td align="left">Dropoff & Pickup Niagara Hotel or B&B    </td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>a</td>
    </tr>

    <tr>
        <th>Whats Included</th>
        <th>Lights N' Sights</th>
        <th>Night Venture</th>
        <th>Falls View Lights</th>
        <th>Night Hawk</th>
        <th>Evening Tourist</th>
        <th>Evening Overnighter</th>
    </tr>



    <tr align="center" data-discount="1">
        <form >
            <td align="left">Adults</td>
            <td><input type="number" price="105" value="0" min="0" max="99" maxlength="2" size="2"></td>
            <td><input type="number" price="120" value="0" min="0" max="99" maxlength="2" size="2"></td>
            <td><input type="number" price="144" value="0" min="0" max="99" maxlength="2" size="2"></td>
            <td><input type="number" price="210" value="0" min="0" max="99" maxlength="2" size="2"></td>
            <td><input type="number" price="219" value="0" min="0" max="99" maxlength="2" size="2"></td>
            <td><input type="number" price="134" value="0" min="0" max="99" maxlength="2" size="2"></td>
        </tr>
        <tr align="center" data-discount="1">
            <td align="left">Senior Citizens</td>
            <td><input type="number" price="95" value="0" min="0" max="99" maxlength="2" size="2"></td>
            <td><input type="number" price="110" value="0" min="0" max="99" maxlength="2" size="2"></td>
            <td><input type="number" price="134" value="0" min="0" max="99" maxlength="2" size="2"></td>
            <td><input type="number" price="200" value="0" min="0" max="99" maxlength="2" size="2"></td>
            <td><input type="number" price="209" value="0" min="0" max="99" maxlength="2" size="2"></td>
            <td><input type="number" price="124" value="0" min="0" max="99" maxlength="2" size="2"></td>
        </tr>
        <tr align="center" data-discount="1">
            <td align="left">Children 4-12</td>
            <td><input type="number" price="95" value="0" min="0" max="99" maxlength="2" size="2"></td>
            <td><input type="number" price="110" value="0" min="0" max="99" maxlength="2" size="2"></td>
            <td><input type="number" price="134" value="0" min="0" max="99" maxlength="2" size="2"></td>
            <td><input type="number" price="200" value="0" min="0" max="99" maxlength="2" size="2"></td>
            <td><input type="number" price="209" value="0" min="0" max="99" maxlength="2" size="2"></td>
            <td><input type="number" price="124" value="0" min="0" max="99" maxlength="2" size="2"></td>
        </tr>
        <tr align="center" data-discount="1">
            <td align="left">under 4</td>
            <td><input type="number" price="0" value="0" min="0" max="99" maxlength="2" size="2"></td>
            <td><input type="number" price="15" value="0" min="0" max="99" maxlength="2" size="2"></td>
            <td><input type="number" price="0" value="0" min="0" max="99" maxlength="2" size="2"></td>
            <td><input type="number" price="0" disabled="disabled"  value="0" min="0" max="99" maxlength="2" size="2"></td>
            <td><input type="number" price="0" disabled="disabled" value="0" min="0" max="99" maxlength="2" size="2"></td>
            <td><input type="number" price="0" value="0" min="0" max="99" maxlength="2" size="2"></td>
        </tr>
        <tr class="sub-total" align="center">
            <td align="left">Sub total: </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="total" align="center">
            <td align="left"><b>Final Total:   </b> </td>
            <td colspan="6" align="left" style="padding-left:10px"> </td>
        </tr>
    </form>
</table>

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?

attilahajzer

is there maybe a wordpress plugin for this kind of thing?

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.

attilahajzer

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.

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..

<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.

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

attilahajzer

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.

http://jsfiddle.net/attilahajzer/m6e2y/6/embedded/result/

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

karlpcrowley

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

If you want to open up a new mail check out this script http://jscode.com/generators/mailto_generator.shtml

attilahajzer

its going to be an SSL secured page.

and

could we get the final total into a input box, that can't be changed? or is there another alternative of some sort?

karlpcrowley

You could use

<input contentEditable="false"></input>

Then populate it with JavaScript

Mottie

Or set an input to "readonly"

<input type="text" value="" readonly>

attilahajzer

what would the new JS look like?

http://jsfiddle.net/attilahajzer/m6e2y/7/

Mottie

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

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

attilahajzer

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?

karlpcrowley

This Youtube channel is where I got started with PHP
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/

Forums Get help. Give help.

Howdy, Stranger!

Categories

Tips