Hi all,
This is a follow-up question to
one I asked @ StackOverflow, but I couldn't get a follow-up answer there.
Basically I have a delivery price estimator that uses the
very helpful Jquery Calculation Plugin and a live example of it can be found here:
http://jsfiddle.net/mohammadAdil/afk3C/5/
With some great help, I've managed to have almost everything working. So far I can calculate and display the subtotal and the grand total, which includes a 13% sales tax. What I need now is a way to display the tax value ($ amount).
I hope this makes sense and thanks for any help.
The script:
<script>
$("[rel='eta']").sum("keyup", "#eta,.eta");
$(".travel").sum("keyup", "#travel,.travel2");
$("#FirstHourRate, #HalfHourRate, [rel='eta'], #OtherCharges, #Fuel").keyup(recalc);
function recalc() {
$("#subtotal, .subtotal").calc(
// the equation to use for the calculation
"Fuel + Other + FirstHourRate + (eta-1)*2*HalfHourRate", {
bind: "keyup",
// define the variables used in the equation, these can be a jQuery object
eta: $("[rel='eta']").sum(),
Fuel: $("#Fuel"),
Other: $("#OtherCharges"),
FirstHourRate: $("#FirstHourRate"),
HalfHourRate: $("#HalfHourRate")
}, function(s) {
// return the number as a dollar amount
var gt = s.toFixed(2) * 1.13;
$("#total, .total").text("$" + gt.toFixed(2));
return "$" + s.toFixed(2);
});
}
</script><div class="span5">
<form id="EstimateForm" action="" method="post" class="form-horizontal"
<input type="hidden" name="workemail" value="">
<input type="hidden" id="HST" name="HST" class="span3">
<input type="hidden" id="Subtotal" name="Subtotal">
<input type="hidden" id="Total" name="Total">
<fieldset>
<!-- Form Name -->
<h2>Price Estimator</h2>
<!-- Text input-->
<div class="control-group">
<label class="control-label">Drive From Yard</label>
<div class="controls">
<input id="DriveFromYard" name="DriveFromYard" type="text" rel="eta" class="input-small">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label">Loading</label>
<div class="controls">
<input id="Loading" name="Loading" type="text" rel="eta" class="input-small">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label">Drive Time</label>
<div class="controls">
<input id="DriveTime" name="DriveTime" type="text" rel="eta" class="input-small">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label">Offloading</label>
<div class="controls">
<input id="Offloading" name="Offloading" type="text" rel="eta" class="input-small">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label">Drive To Yard</label>
<div class="controls">
<input id="DriveToYard" name="DriveToYard" type="text" rel="eta" class="input-small">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label">Travel Distance</label>
<div class="controls">
<input id="TravelDistance" name="TravelDistance" type="text" placeholder="" class="input-small">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label">First Hour Rate</label>
<div class="controls">
<input id="FirstHourRate" name="FirstHourRate" type="text" placeholder="" class="input-small">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label">Half Hour Rate</label>
<div class="controls">
<input id="HalfHourRate" name="HalfHourRate" type="text" placeholder="" class="input-small">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label">Fuel</label>
<div class="controls">
<input id="Fuel" name="Fuel" type="text" placeholder="" class="input-small">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label">Other Charges</label>
<div class="controls">
<input id="OtherCharges" name="OtherCharges" type="text" placeholder="" class="input-small">
</div>
</div>
<!-- Button (Double) -->
<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<button id="ProcessEstimate" name="ProcessEstimate" class="btn btn-warning">Process</button>
<button id="ResetEstimate" name="ResetEstimate" class="btn btn-default">Reset</button>
</div>
</div>
</fieldset>
</form>
</div>
<div class="span4">
<span class="eta"></span><br>
<span class="travel2"></span><br>
<span class="subtotal"></span><br>
<span class="total"></span>
</div>
Correction,
[ed. note: treigh last edited this post 13 years, 6 months ago.]
