jQuery Price Calculator Pro


12th April 2012: Version 1.5.0 has been released (updated preview image coming soon). It has been entirely rewritten in a more maintainable and extensible code style, and has plenty of bug fixes and a few new features. Checkout the demos!

jQuery Price Calculator Pro does not have the ability to submit forms via email, so if you are looking for this functionality checkout jQuery Order Form Builder. It has a host of great features, including a graphical user interface for configuring the entire form (including jQuery Price Calculator Pro), and heaps more. It also generates all the code needed for you, so you don’t have to write a single line!


jQuery Price Calculator Pro (PCP) is a clean, simple, progressive price calculator script. PCP allows you to add a running total to an order form, giving your customers a precise idea of how much an item’s configuration will cost. It also allows you to show an itemized summary, so that the customer can get a quick overview of their order.

Supported Inputs: Radio Buttons, Checkboxes, Drop Downs, MultiSelects, Single Line Text Inputs, Multiline Text Inputs, File Inputs, jQuery UI Sliders, jQuery Numeric Spinners

PCP is very customizable. You can:

  • Show or hide component prices and/or ignore certain components when showing a component price
  • Allow the user to show/hide component prices
  • Show an itemized summary of the order, which will optionally float in the window as the user scrolls
  • Set what you want displayed when an item’s component has zero cost (i.e. free)
  • Add multiple quantity fields
  • … and much more!

There are heaps of options that you can configure; check out the demos to see jQuery Price Calculator Pro in action.

You can configure how prices are displayed (the sign before, the sign after, the decimal place, the thousands separator); e.g.: 1234 can be turned into $1,234.00 AUD, £1.234,00 EUR, etc.

You can add quantity fields that apply to certain inputs, show prices of each input (and even allow the user to show or hide them), include jQuery UI Sliders/Numeric Spinners with a simple syntax (E.g.: <input type=”number” data-slider=”true” min=”1” max=”10” step=”1” value=”3” />), and heaps more!

Please note: jQuery Price Calculator Pro requires at least a basic understanding of HTML and Javascript. If you do not feel competent with these, then I’d suggest taking a look at jQuery Order Form Builder, which lets you visually configure an order form, and then download all the code required to make it work.


v1.5 – 12 April 2012

  • Rewrote code to take more object-oriented approach; improved performance
  • Added support for prices over periods (i.e. price over 12 months, etc.)
  • Added hidden input that is updated with total cost
  • Fixed/polished floating of summary sidebar
  • Fixed various bugs in itemized summary
  • Polished itemized summary
  • Fixed functionality of options.showZeroAs
  • Fixed some quantity fields not affecting total

v1.4 – 27 October 2011

<li>Added support for numeric spinners</li>
<li>Added ability to defined a selector to be used for the summary/total box</li>
<li>Extended quantity fields to allow limiting to specific inputs</li>
<li>Added thousands separator to number format</li>
<li>Ensured compatibility with: jStyle Lite, jQuery Order Form Builder</li>
<li>Added ability to hide item from itemized summary</li>
<li>Fixed bug with itemization including items outside of form</li>


skipped for internal reasons

v1.2 – 06 August 2011

  • Added ability to show total, summary, and configuration at the bottom of the order form rather than to the left or right.
  • Added ability to have a quantity field
  • Added ability for certain inputs to be ignored
  • Added option to allow custom text to be shown when the configuration summary is empty
  • Added ability to customize the decimal separator (e.g. ’,’, etc. – defaults to ’.’)
  • Added option to ignore certain fields if they have a default value so that they do not show up in the summary unless the user changes them

v1.1 – 30 July 2011

<li>Added ability to show an itemized summary of the order under the running total</li>
<li>Added support for jQuery UI Slider</li>

v1.0 – 20 July 2011

<p>Initial Release</p>

Ambertemplates Banner

Related posts