On Sep 28, 1:26 pm, runrunforest <craigco...@gmail.com> wrote:
> Hi,
>
> I've got a script from dansblog (link
> herehttp://blog.pengoworks.com/index.cfm/2008/1/23/jQuery-Calculation-Plu...)
>
> I copied and presented it as below, its doesn't work. What I've done
> incorrectly ?
Most such scripts are worth what you pay for them, or less.
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
> <html xmlns="http://www.w3.org/1999/xhtml";>
> <head>
> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
> <script type="text/javascript">
> $(function(){
> // bind the recalc function to the quantity fields
> $("input[name^=qty_item_]").bind("keyup", recalc);
Using the keyup event is not a good idea. You are running the listener
far more often that it needs to, you only need to run it when the user
has finished their input for a particular field (e..g. run it using
blur).
> function recalc(){
> // run the calc() method on each of the "total" fields
> $("[id^=total_item]").calc(
Where is calc() defined? User input should always be validated - what
will happen if they input # instead of 3?
> // the equation to use for the calculation
> "qty * price",
> // we now define the values for the variables defined
> in the
Beware of those who talk about "we".
> equation above
> {
> // instead of using a static value, we use a
> jQuery object which
> grabs all the quantities
It grabs exactly the same set of inputs every single time the keyup
event occurs. Why would you do that except to waste CPU cycles?
> 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);
In some implementations, toFixed is buggy, though likely it doesn't
matter here.
<URL: http://www.merlyn.demon.co.uk/js-rndg1.htm#toF >
> },
> // 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();
Where is sum() defined? Does it validate user input?
>
> // now that we have the grand total, we must
> update the screen
> $("#grandTotal").text(
> // round the results to 2 digits
> "$" + sum.toFixed(2)
If the values have already been rounded, their sum does not need to be
rounded again.
> );
> }
> );
> }});
>
> </script>
> </head>
>
> <body>
> <table width="500">
> <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>
> </td>
> <td align="center" id="price_item_1">
> $39.99
> </td>
Somewhere there must be a calc() function that takes an input element
and gets its value, then any other type of element and gets its text
content (or value perhaps), strips off the currency sign, multiplies
the two and returns the result. Maybe it does some checking of the
values it's been passed. Or not.
It seems strange that a function called "sum" would not do rounding.
How is invalid input handled?
--
Rob
