I actually wrote this plug-in months ago, but only made passing mention about in on the jQuery mailing list. Since the topic of dynamic calculation came up again today on the mailing list, I thought I'd go ahead and officially announce the plug-in here.
My jQuery Calculation Plug-in was designed as a generic mathematical library to make it easy to do things like sum or average values that are displayed on the page. For example, to get the sum of all of the elements with the class of "price" you'd use:
Since I did not want to restrict calculation to only form elements, the plug-in has helper method called parseNumber() which is called internally which parses a numeric value from an element. It can parse both form elements and normal HTML elements (like <div> or <span> elements.) In order to allow parsing of HTML elements that might contain additional formatting in the element, I'm using a regular expression of /\d+(,\d{3})*(\.\d{1,})?/g to parse the contents of the element to find the first thing that looks like a number. And don't worry, you can configure the regular expression if it doesn't meet your needs.
This plug-in actually gives you a lot of power. For example, let's say we have a form that looks like:
Wouldn't it be great if you could update all the calculations on the screen without writing a ton of code? Well, this is where the Calculation Plug-in really shines. The HTML for the table above is:
<col style="width: 50px;" />
<col />
<col style="width: 60px;" />
<col style="width: 110px;" />
<tr>
<th>
Qty
</th>
<th align="left">
Product
</th>
<th>
Price
</th>
<th>
Total
</th>
</tr>
<tr>
<td align="center">
<input type="text" name="qty_item_1" id="qty_item_1" value="1" size="2" />
</td>
<td>
<a href="http://www.packtpub.com/jQuery/book">Learning jQuery</a>
</td>
<td align="center" id="price_item_1">
$39.99
</td>
<td align="center" id="total_item_1">
$39.99
</td>
</tr>
<tr>
<td align="center">
<input type="text" name="qty_item_2" id="qty_item_2" value="1" size="2" />
</td>
<td>
<a href="http://jquery.com/">jQuery Donation</a>
</td>
<td align="center" id="price_item_2">
$14.99
</td>
<td align="center" id="total_item_2">
$14.99
</td>
</tr>
<tr>
<td colspan="3" align="right">
<strong>Grand Total:</strong>
</td>
<td align="center" id="grandTotal">
</td>
</tr>
</table>
In order to hook our form up so that all of the totals are automatically calculated on the fly, we just need to bind a function to the quantity fields to be triggered on each key press:
$("input[@name^=qty_item_]").bind("keyup", recalc);
Our recalc() function looks like this:
// run the calc() method on each of the "total" fields
$("[@id^=total_item]").calc(
// the equation to use for the calculation
"qty * price",
// we now define the values for the variables defined in the equation above
{
// instead of using a static value, we use a jQuery object which grabs all the quantities
qty: $("input[@name^=qty_item_]"),
// now we define the jQuery object which reads in the "price" from the table cell
price: $("[@id^=price_item_]")
},
// this function is execute after the calculation is completed, which allows us to
// add formatting to our value
function (s){
// return the number as a dollar amount
return "$" + s.toFixed(2);
},
// once all calculations are completed, we execute the code below
function ($this){
// now we get the sum() of all the values we just calculated
var sum = $this.sum();
// now that we have the grand total, we must update the screen
$("#grandTotal").text(
// round the results to 2 digits
"$" + sum.toFixed(2)
);
}
);
}
Well this code may look a little overwhelming at first, it's actually very easy to implement. You can see this example code in action on the Calculation Plug-in's home page.
The one big "gotcha" with using jQuery selectors as variables for the equations is that your selectors must return arrays of equal size. The calc() engine needs matching arrays, so that it can correct apply the calculations to each position in the array. For example, the above code actually translates to:
qty[0] * price[0] = total[0]
qty[1] * price[1] = total[1]
I think for the most part this should be a big deal, but I guess if you had a really strange layout trying to get your selectors to match up array items correctly could be programmatic. Unfortunately, I'm not sure there's a solution to that problem that doesn't involve a lot of complexity.
247 Comments
Comments for this entry have been disabled.