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

Links from Video:


  1. jaybone malone
    Permalink to comment#

    AHHHH!! I love this site. I was just searching for info regarding forms.

    Thanks for the insight

  2. joyoge designers' bookmark
    Permalink to comment#

    helpful tut. thanks..

  3. Scoobie
    Permalink to comment#

    Thanks, Chris.
    Another excellent tutorial, keep ’em going!

  4. kyle
    Permalink to comment#

    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?

  5. Dmitry
    Permalink to comment#

    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.

    • Chris Coyier
      Permalink to comment#

      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.

  6. Yosy
    Permalink to comment#

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

  7. Xames
    Permalink to comment#

    To bad there is a bug, 1.5 shouldn’t be a valid input.. But in your example it is..

    • V1
      Permalink to comment#

      accordion to his code its a valid input .. and code never lies :o

  8. V1
    Permalink to comment#

    You are using a function to check if a string is a number or not.. Use regexp instead


    (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 != ”) ) {

  9. Brenelz
    Permalink to comment#

    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.

  10. Mike
    Permalink to comment#

    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.

    • Chris Coyier
      Permalink to comment#

      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.

  11. Ivor
    Permalink to comment#

    Pretty good Screencast, thanks Chris!

  12. Nathan
    Permalink to comment#

    Hey Chris, how much do you charge for this sort of thing?

  13. Chris
    Permalink to comment#

    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.

  14. BasementJack
    Permalink to comment#

    Chris, Thanks again for sharing how this stuff is done.
    There are tons of videos out there, but yours are the best!

  15. Tim
    Permalink to comment#

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

  16. marie
    Permalink to comment#

    Hello, i find this css very good.
    But can you say me how can i change $ in € ?…..?

    Help !!!! Thanks

  17. Belinda
    Permalink to comment#

    Excellent info! Just one thing, what is the easiest way in which to change the currecy of the form from USD to SA Rand (I am in South Africa)

  18. kundan
    Permalink to comment#

    hi guys the form is really super, i need a help how to set the pay button for OpenCart as i have done with other things in opencart except the checkout… thankyou

  19. Tom
    Permalink to comment#

    Hi Chris

    I was wondering if anyone can help? I want to have several of these forms on one page. Currently if I try to do this only the first “SubTotal/Total” boxes is updated, it’s also updated from the other forms. I know i need to change the ID’s on each form to make each one unique but i’ve tried that and I can’t get it functioning properly… Any tips?

    Kind regards


  20. Omar
    Permalink to comment#

    Very nice. Can it be integrated with paypal?

    Thank you

  21. COCL
    Permalink to comment#


    I want to enter the Unit Price manually using TextField. Where can i change the calculation?

    Thank you. Please help

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.