jQuery Calculation Plugin & change cost per select
I've got a form that calculates the total cost of an order, but if an item costs more at a larger size I can't account for that. Anyone have any ideas? See sample below. field & calculation plugins are available from here
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="scripts/jquery.field.min.js"></script>
<script type="text/javascript" src="scripts/jquery.calculation.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
function recalc(){
// 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)
);
}
);
}
// bind the recalc function to the quantity fields
$("input[name^=qty_item_]").bind("keyup", recalc);
});
</script>
<!--
<input type="text" name="qty_item_1" id="qty_item_1" value="1" size="2" />
<input type="text" name="qty_item_2" id="qty_item_2" value="1" size="2" />
-->
</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>
Size
</th>
<th>
Price
</th>
<th>
Total
</th>
</tr>
<tr>
<td align="center">
<input type="t开发者_高级运维ext" name="qty_item_1" id="qty_item_1" size="2" />
</td>
<td>
Shirt
</td>
<td>
<select name="size" id="sSize">
<option value="">Please Select…</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
<option value="xl">Extra Large (+$3.00)</option>
</select>
</td>
<td align="center" id="price_item_1">
$39.99
</td>
<td align="center" id="total_item_1">
$0.00
</td>
</tr>
<tr>
<td align="center">
<input type="text" name="qty_item_1" id="qty_item_1" size="2" />
</td>
<td colspan="2">
Hat
</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="4" align="right">
<strong>Grand Total:</strong>
</td>
<td align="center" id="grandTotal">
</td>
</tr>
</table>
</body>
</html>
Personally as its a plug-in i would advise the user to consider making each size of a product a different product, this would mean you can keep it simple and generic.
If you think there is a need for a more advanced system then provide an optional parameter that allows them to pass an function that calculates and returns the cost of that item with whatever parameters they require, this will allow the user of your plugin to have a more elaborate costing system.
I think this is your best option as people (users) have a habit of inventing costing rules that with the best will in the world you can't think of them all.
Now i have answered your question, i would say that any validation of costs or other important data should without exception be completed on the server.
add the size as a parameter and parse out the extra cost from the description. The code below is untested but should work.
<script type="text/javascript">
$(document).ready(function (){
function recalc(){
// run the calc() method on each of the "total" fields
$("[id^=total_item]").calc(
// the equation to use for the calculation
"qty * (price + extraCharge)",
// 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_]"),
extraCharge: function() {
selectedSize = $('#sSize').val();
size = $('option[value=' + selectedSize + ']').text();
charge = 0;
if (size.indexOf('$') != -1) {
charge = parseFloat(size.substring(size.indexOf('$'), size.indexOf(')')));
}
return charge;
}
},
// 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)
);
}
);
}
// bind the recalc function to the quantity fields
$("input[name^=qty_item_]").bind("keyup", recalc);
});
</script>
Actually I tested this and got it to work also it allows for multiple size fields on the form
$("[id^=sSize_]").change(function(){
var strLength = (this.id.length);
var numbr = this.id.substring(strLength, strLength-1);
//alert(numbr);
$("[id=price_item_"+numbr+"]").text('$42.99');
});
加载中,请稍侯......
精彩评论