JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.pengoworks.com/workshop/jquery/calculation/jquery.calculation.js"></script>
<label>Quantity</label>
<input type="text" ID="qty_item_1" runat="server" MaxLength="3" value="0" />
<ul>
<li class="one"><span id="quant_1"></span></li>
<li class="two">Product 1</li>
<li class="three"><span id="price_item_1">£1.00</span></li>
<li class="four"><span id="total_item_1">£0.00</span></li>
</ul>
<label>Quantity</label>
<input type="text" ID="qty_item_2" runat="server" MaxLength="3" value="0" />
<ul>
<li class="one"><span id="quant_2"></span></li>
<li class="two">Product 2</li>
<li class="three"><span id="price_item_2">£13.00</span></li>
<li class="four"><span id="total_item_2">£0.00</span></li>
</ul>
CSS
label {
width:250px;
height:25px;
}
ul {
width:250px;
height:50px;
}
li {
float:left;
margin:0 10px;
}
JavaScript
$(document).ready(
function (){
// update the plug-in version
$("#idPluginVersion").text($.Calculation.version);
// bind the recalc function to the quantity fields
$("input[id^=qty_item_]").bind("keyup", recalc);
// run the calculation function now
recalc();
}
);
function recalc(){
$("[id^=quant_]").text($("input[id^=qty_item_]").val());
$("[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[id^=qty_item_]"),
price: $("[id^=price_item_]")
//if ($("[id^=total_item]").val().length > 0.00){
//$("[id^=total_item]").addClass('enquire');
//}
},
// 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();
$("#ctl00_EnquiryForm1_grandTotal").val(
// round the results to 2 digits
"£" + sum.toFixed(2)
);
}
);
}