Multi-product Quantity-based Order Form

This is just basically version 2 of the ordering form I did up in screencast 50 about a year ago. The same client was reactivating it for another period and I took the opportunity to rewrite some of how it works to make it better. Numbers are entered, math is performed automatically, the people rejoice.

View Demo   Download Files

What does it do?

The main point here is the math. It’s a simple table of products, and each product has an input box for quantity. Changing the value of that quantity box automatically triggers the math and totals are calculated. Row totals are calculated across, then order totals are calculated down. Quantities are totaled and multiplied by a shipping rate and all that is added together.

For demonstration purposes, the form is integrated with FoxyCart, to show how it might be used in a “real” situation.

Improvements over last time

• Some of the functions are more efficient.
• Number formatting is far better. Instead of having a box that just says 12423 in it, it says $12,423. This is thanks to some fun snippetry like this.
• Event handling is smarter. Instead of waiting for the input’s blur event to fire, the math is performed on focus, blur, change, and keyup events, making the form seem smarter and snappier.
• Logic in general is better, handling bad inputs in a cleaner way.

If ya’ll have ideas to make it even better, I’m all ears as always.