#50: Building a Customized and Dynamic Ordering Form
Real-life clients have real-life needs for their websites. They don’t care about your fancy RSS feeds and AJAX, they just want their website to do what they tell you they want it to do. In this screencast I walk through an example feature I am building for a real-life client who needed some very specific functionality built into a page. It is an ordering process that needs to check for a valid zip code, and then do a bunch of custom calculations based on quantities, shipping costs, etc. Both jQuery and PHP are used to do the heavy lifting.
Running time: 31:00
Direct Download: High Quality, Quicktime .M4V Format (AppleTV Ready)
Links from Video:
Get the Flash Player to see this player.
AHHHH!! I love this site. I was just searching for info regarding forms.
Thanks for the insight
helpful tut. thanks..
Thanks, Chris.
Another excellent tutorial, keep ‘em going!
My only suggestion would be to change the quantity input so if I leave it blank it gets treated as a zero instead of showing up as an error (red).
Oh, and, to save time, next time populate the zip table with a php loop, maybe?
Thanks for your helpful tuts.
By the way using javascript for calculating Prices it`s not good idea. Using some plugins to browser users can modify data as they whish. In some cases, for example with payment using PayPal, it will be conflict situation when user will have another payment order then you.
Generally true, but in the real-world context of this being applied, it doesn’t matter much. If the company gets an order for 10 pallets of product for $0.03, you can bet they’ll notice the problem. All orders are hand filled and double checked anyway.
Chris thank you !
But If you do only VALIDATION FOR JS THIS CAN OPEN A VIG SECURITY HOLE THAT NAMES “CSRF”,do validation in php and then use ajax (if you want js..)..
To bad there is a bug, 1.5 shouldn’t be a valid input.. But in your example it is..
accordion to his code its a valid input .. and code never lies :o
You are using a function to check if a string is a number or not.. Use regexp instead
/^[0-9.]+$$/.test(value)
(hmz the preview shows it with two dollar signs.. it should only be one.. so if it get fucked up when i posted its not my fault.)
so it should be;;
if ( (/^[0-9.]+$$/.test(thisValue)) && (thisValue != ”) ) {
ARG@ i said only one dollar sign :@ $$ tss what ever…
Great video Chris! Anything you can do to make the order form easier for the client to use. You don’t need them calculating things when JavaScript can already.
Good Tutorial, but the validation isn’t the best.
Inputing values like “1.4″ will lead to wrong calculation and putting in “1..4″ shows it as valid but outputs “NaN” and nothing works anymore, even when you delete that until you put in an valid number the calculation is incorrect, especially the one who adds it all together is doing strange things in that case.
Very true, but if you were a customer, I think NaN would be a pretty good indicator that something is wrong and you should take a look at what you did.
What I outta do though is just eliminate the period from the valid characters when validating a number, as no “half-palletes” can be ordered.
Pretty good Screencast, thanks Chris!
Hey Chris, how much do you charge for this sort of thing?
Little disappointed in your 50th video. =/
Didn’t catch all of it but did you mention anything CSS related?
The work you put into that form is nice though.
Chris, Thanks again for sharing how this stuff is done.
There are tons of videos out there, but yours are the best!
Great video. I completely agree with doing basic tasks in javascript. I would recommend having some server-side validation on the input as well.
Also, why not save the items and their cost in the database as well? Then generating the “Items” table off a query of the database table.
Anyone, thanks for the vid!!!!