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

Comments

  1. User Avatar
    jaybone malone
    Permalink to comment#

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

    Thanks for the insight

  2. User Avatar
    joyoge designers' bookmark
    Permalink to comment#

    helpful tut. thanks..

  3. User Avatar
    Scoobie
    Permalink to comment#

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

  4. User Avatar
    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. User Avatar
    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.

    • User Avatar
      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. User Avatar
    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. User Avatar
    Xames
    Permalink to comment#

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

    • User Avatar
      V1
      Permalink to comment#

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

  8. User Avatar
    V1
    Permalink to comment#

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

  9. User Avatar
    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. User Avatar
    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.

    • User Avatar
      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. User Avatar
    Ivor
    Permalink to comment#

    Pretty good Screencast, thanks Chris!

  12. User Avatar
    Nathan
    Permalink to comment#

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

  13. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    marie
    Permalink to comment#

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

    Help !!!! Thanks

  17. User Avatar
    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. User Avatar
    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. User Avatar
    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

    Tom

  20. User Avatar
    Omar
    Permalink to comment#

    Very nice. Can it be integrated with paypal?

    Thank you

  21. User Avatar
    COCL
    Permalink to comment#

    Hi,

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

    Thank you. Please help

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag