TONYBEBBER

costEstimatr jQuery Plugin

Jan 8th, 2012

costEstimatr is a very simple jQuery plugin that I created to easily allow anyone who offers a service to provide a real-time cost estimate to their users. In a nutshell, this plugin allows you to add the value attribute of all checkboxes, radio buttons and select form elements (as long as you have set it to a number which represents the price) and outputs a cost estimate as well as an optional estimate on the number of days it will take to complete the project.

Demo

Installation/Usage

Step 1
Download and call the jquery.costEstimatr.js script which is dependent on the jQuery core. Example…
<script type="text/javascript" src="js/jquery.costEstimatr.js"></script>

Step 2
Select the form element that you want to have cost estimation functionality on and then apply the costEstimatr method. Example…
$('#priceQuote').costEstimatr();

Step 3
Update the value attribute of any checkbox, radio button or select form element to use a number which will represent the cost of that particular service. Example…
<input type="checkbox" name="hosting" value="99" id="hosting"><label for="hosting">Web Hosting <span>$99</span></label>

Step 4
Define your estimation summary container. Example…
<p>Estimated Total Price: $<span id="price">0.00</span></p>

By default the plugin looks for a span with an id of price (span#price) to update the cost, and a span with an id of days (span#days) to update the ETA (ETA is optional). However, there are a few options that you can set to overwrite these and a few other defaults.

Plugin Options

This plugin has 4 options that can be overwritten. Below is a description of these options and their default value…

price: This defines the selector that you would like to use to display cost estimate summary.
Default Value:
price: $('span#price')

showDaysEstimate: Boolean value to determine whether or not to display an ETA.
Default Value:
showDaysEstimate: true

days: This defines the selector that you would like to use to display estimated days it will take to complete the project.
Default Value:
days: $('span#days')

dollarsPerDay: In order for the days estimate to update accordingly, a number of dollars per day needs to be set. For example, by default the dollarsPerDay option is set to 200, so for every $200 that gets added to the price summary, 1 day gets added to the days summary.
Default Value:
dollarsPerDay: 200

Below is an example of how to pass new options to the costEstimatr method to overwrite the defaults…
$('#priceQuote').costEstimatr({price: $('#yourNewPriceContainer'), showDaysEstimate: false});