Hi all, I have a code in javascript and I am using jQuery Calculation plugin (can be downloaded from link text). The form that I have is kind of like shopping cart form i.e. the prices update according to the quantity entered. The form has text boxes which accepts numbers and this denotes the quantity. Once this quantity is entered/modified, the price for the same is updated and at the same time, the grand total is also updated. Currently, it only lets me work with text boxes. I want to be able to use Checkboxes and Dropdown lists in the form and want the JS code to handle updating the price and the grand total and show it instantly (just as it would do in case of the current existing text boxes). I tried this on my localhost but I have ended breaking up current functionality or the updated code just does not work for the Checkboxes and Dropdown lists.
The form that I have so far is:
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.calculation.js" type="text/javascript"></script>
<SCRIPT type="text/javascript">
var bIsFirebugReady = (!!window.console && !!window.console.log);
$(document).ready(
function (){
// update the plug-in version
$("#idPluginVersion").text($.Calculation.version);
// bind the recalc function to the quantity fields
$("input[name^=qty_item_]").bind("keyup", recalc);
// run the calculation function now
recalc();
// automatically update the "#totalSum" field every time
// the values are changes via the keyup event
$("input[name^=sum]").sum("keyup", "#totalSum");
// automatically update the "#totalAvg" field every time
// the values are changes via the keyup event
$("input[name^=avg]").avg({
bind:"keyup"
, selector: "#totalAvg"
// if an invalid character is found, change the background color
, onParseError: function(){
this.css("backgroundColor", "#cc0000")
}
// if the error has been cleared, reset the bgcolor
, onParseClear: function (){
this.css("backgroundColor", "");
}
});
// automatically update the "#minNumber" field every time
// the values are changes via the keyup event
$("input[name^=min]").min("keyup", "#numberMin");
// automatically update the "#minNumber" field every time
// the values are changes via the keyup event
$("input[name^=max]").max("keyup", {
selector: "#numberMax"
, oncalc: function (value, options){
// you can use this to format the value
$(options.selector).val(value);
}
});
// this calculates the sum for some text nodes
$("#idTotalTextSum").click(
function (){
// get the sum of the elements
var sum = $(".textSum").sum();
// update the total
$("#totalTextSum").text("$" + sum.toString());
}
);
// this calculates the average for some text nodes
$("#idTotalTextAvg").click(
function (){
// get the average of the elements
var avg = $(".textAvg").avg();
// update the total
$("#totalTextAvg").text(avg.toString());
}
);
}
);
function recalc(){
$("[id^=total_item]").calc(
// the equation to use for the calculation
"qty * price",
// define the variables used in the equation, these can be a jQuery object
{
qty: $("input[name^=qty_item_]"),
price: $("[id^=price_item_]"),
},
// define the formatting callback, the results of the calculation are passed to this function
function (s){
// return the number as a dollar amount
return "$" + s.toFixed(2);
},
// define the finish callback, this runs after the calculation has been complete
function ($this){
// sum the total of the $("[id^=total_item]") selector
var sum = $this.sum();
$("#grandTotal").text(
// round the results to 2 digits
"$" + sum.toFixed(2)
);
}
);
}
</SCRIPT>
<form name="form1" method="post" action="">
<div id="formContent">
<P id="ex-sum">
<table width="500">
<COL style="width: 50px;">
<COL>
<COL style="width: 60px;">
<COL style="width: 110px;">
<tbody><tr>
<th width="179">
Qty
</th>
<th width="164" align="left">
Product
</th>
<th width="72">
Price
</th>
<th width="65">
Total
</th>
</tr>
<tr>
<td align="center">
<INPUT name="qty_item_1" type="text" class="input" id="qty_item_1" value="1" size="5">
</td>
<td>Table</td>
<td align="center" id="price_item_1">
$150
</td>
<td align="center" id="total_item_1">$</td>
</tr>
<tr>
<td align="center">
<INPUT name="qty_item_2" type="text" class="input" id="qty_item_2" size="5">
</td>
<td>
Pencil</td>
<td align="center" id="price_item_2">
$100</td>
<td align="center" id="total_item_2">$</td>
</tr>
<tr>
<td align="center">
<INPUT name="toys" type="checkbox" id="toys" value="1">
</td>
<td>
Toys</td>
<td align="center" id="price_item_3">
$50</td>
<td align="center" id="total_item_3">$</td>
</tr>
<tr>
<td align="center"><select name="books" id="books">
<option selected="selected">Select an option</option>
<option value="1">Book1</option>
<option value="1">Book2</option>
<option value="1">Book3</option>
</select></td>
<td>
Books</td>
<td align="center" id="price_item_3">
$10</td>
<td align="center" id="total_item_3">$</td>
</tr>
<tr>
<td colspan="3" align="right">
<STRONG>Grand Total:</STRONG>
</td>
<td align="center" id="grandTotal">$</td>
</tr>
</tbody></table>
</div>
</form>
Also as you can see the above form code, tables are used in it. Is there anyway to achieve what I am trying to do without using tables?
Thank you all in advance.