I have used the excellent jQuery Calculation plugin from http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm. But I need to edit it in order for it to work within a CMS form module, which requires the jQuery to write the values I want directly into the html read only input tags which is created dynamically on the form.
So instead of, the default html code provided by the above calculation plugin, which works very well out of the box. I need to write a jQuery which takes the price item and sends output to populate the price tag and total tag - i.e.
$("input[id$='childTotal']").val('25.99')
A sample of my html code below:
<td><TextBox name="childNumber" Id="childNumber" DataField="ChildPassengers" DataType="int32" /></td>
Below is my jQuery code (which does not work)
<script type="text/javascript">
var bIsFirebugReady = (!!window.conso开发者_开发技巧le && !!window.console.log);
$(document).ready(
function (){
// update the plug-in version
$("#idPluginVersion").text($.Calculation.version);
// bind the recalc function to the input adult quantity fields
$("input[name^=adultNumber]").bind("keyup", recalc);
// run the calculation function now
recalc();
// bind the recalc function to the input child quantity fields
$("input[name^=childNumber]").bind("keyup", recalc);
// run the calculation function now
recalc();
$("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$=adultTotal]").calc(
// the equation to use for the calculation
"Aqty * Aprice",
// define the variables used in the equation, these can be a jQuery object
{
Aqty: $("input[name$=adultNumber]"),
Aprice: $("input[id$='adultPrice']").val('50.99')
},
var Atotal=Aqty * Aprice;
Atotal.toFixed(2); // two decimal places
$('#adultTotal').html( Atotal.toFixed(2));
function recalc(){
$("[id$=childTotal]").calc(
// the equation to use for the calculation
"Cqty * Cprice =Csum",
{
Cqty: $("input[name$=childNumber]"),
Cprice: $("input[id$='childPrice']").val('25.99')
},
var Ctotal=Cqty * Cprice;
Ctotal.toFixed(2); // two decimal places
$('#childTotal').html( Ctotal.toFixed(2));
function recalc(){
$("[id$=grandTotal]").calc(
var Grantotal=Atotal + Ctotal;
Grantotal.toFixed(2); // two decimal places
$('#grandTotal').html( Gtotal.toFixed(2));
}
);
}
</script>
I think that your problem is that you have redefined `recalc'. Give each function a unique name.
精彩评论