180
rated 0 times
[
183]
[
3]
/ answers: 1 / hits: 8581
/ 10 Years ago, mon, december 22, 2014, 12:00:00
I am trying to add rows dynamically to a html table to generate a bill using jquery. I want to calculate the grand total dynamically as the rows are added or removed
My code
These are my input fields from which the values are taken. All the DropDown boxes are populated from DB.
<div class=block-fluid>
<div class=row-form clearfix>
<div class=span3>Select Product:</div>
<div class=span7>
<select name=selectprod id=s2_2 style=width: 100%;>
<option value=0>Choose a Product...</option>
<optgroup id=Tablets label=Tablets>
</optgroup>
<optgroup id=Capsule label=Capsule>
</optgroup>
<optgroup id=Syrup label=Syrup>
</optgroup>
<optgroup id=Drops label=Drops>
</optgroup>
<optgroup id=Inhalers label=Inhalers>
</optgroup>
<optgroup id=Topical label=Topical>
</optgroup>
<optgroup id=Intravascular label=Intravascular>
</optgroup>
</select>
</div>
</div>
<div class=row-form clearfix id=prodnamediv>
<div class=span3>Product Name:</div>
<div class=span7>
<input id=prodnameinput type=text value= readonly=readonly/>
</div>
</div>
<div class=row-form clearfix id=prodcompdiv>
<div class=span3>Product Company:</div>
<div class=span7>
<input id=prodcompinput type=text value= readonly=readonly/>
</div>
</div>
<div class=row-form clearfix id=prodtypediv>
<div class=span3>Product Type:</div>
<div class=span7>
<input id=prodtypeinput type=text value= readonly=readonly/>
</div>
</div>
<div class=row-form clearfix id=proddosediv>
<div class=span3>Product Dose:</div>
<div class=span7>
<input id=proddoseinput type=text value= readonly=readonly/>
</div>
</div>
<div class=row-form clearfix id=tabletdiv>
<div class=span3>Tablets Per Strip:</div>
<div class=span7>
<input id=tabletinput type=text value= readonly=readonly/>
</div>
</div>
<div class=row-form clearfix id=prodcapacitydiv>
<div class=span3>Product Capacity:</div>
<div class=span7>
<input id=prodcapacityinput type=text value= readonly=readonly/>
</div>
</div>
<div class=row-form clearfix id=currentstockdiv>
<div class=span3>Current Stock Quantity:</div>
<div class=span7>
<input id=currentstockinput type=text value= readonly=readonly/>
</div>
</div>
<div class=row-form clearfix id=prodpricetabcapdiv>
<div class=span3>Price Per Tablet/Capsule:</div>
<div class=span7>
<input id=prodpricetabcapinput type=text value= />
</div>
</div>
<div class=row-form clearfix id=prodpricediv>
<div class=span3>Product Price:</div>
<div class=span7>
<input id=prodpriceinput type=text value= />
</div>
</div>
<div class=row-form clearfix id=qtytoselldiv>
<div class=span3>No. of Quantities to sell:</div>
<div class=span7>
<input id=qtytosellinput type=text value= />
</div>
</div>
<div class=row-form clearfix id=tablettoselldiv>
<div class=span3>No. of Tablets/Capsules to sell:</div>
<div class=span7>
<input id=tablettosellinput type=text value= />
</div>
</div>
<div class=row-form clearfix id=pkgdatediv>
<div class=span3>Packaging Date:</div>
<div class=span7>
<input id=pkgdateinput type=text value= />
</div>
</div>
<div class=row-form clearfix id=manufactdiv>
<div class=span3>Manufacturing Date:</div>
<div class=span7>
<input id=manufactinput type=text value= />
</div>
</div>
<div class=row-form clearfix id=expdatediv>
<div class=span3>Expiry Date:</div>
<div class=span7>
<input id=expdateinput type=text value= />
</div>
</div>
<div class=row-form clearfix id=batchnodiv>
<div class=span3>Batch No.:</div>
<div class=span7>
<select name=select id=s2_1 style=width: 100%;>
<option value=0>choose a option...</option>
</select>
</div>
</div>
<div class=toolbar clearfix>
<div class=right>
<div class=btn-group>
<button class=btn id=addtopurchase type=button value=Add><span>Add</span></button>
</div>
</div>
</div>
</div>
This is my table which is populated dynamically when above Add button is pressed
<div class=block-fluid table-sorting clearfix>
<table cellpadding=0 cellspacing=0 width=100% class=table id=tSortable_2>
<thead>
<tr>
<th width=20%>Product</th>
<th width=12%>Pkg Date</th>
<th width=12%>Mfact date</th>
<th width=12%>Expiry</th>
<th width=12%>Batch No.</th>
<th width=12%>Unit Price</th>
<th width=10%>Qty</th>
<th width=10%>Subtotal</th>
<th></th>
</tr>
</thead>
<tbody id=tablebody>
<tr>
<td class=prodname>prod</td>
<td class=pkgdate>pkgdate</td>
<td class=manufactdate>manufactdate</td>
<td class=expdate>expdate</td>
<td class=batchno>batchno</td>
<td class=unitprice>pertabprice</td>
<td class=qty>qty</td>
<td class=subtot>subtotal</td>
<td>
'<button class=btn btn-link type=button>Remove</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Total:</td>
<td></td>
<td>
<div class=toolbar clear clearfix>
<div class=center>
<button type=button class=btn btn-small btn-warning><span class=icon-ok icon-white></span></button>
</div>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
This script populates the above table rows dynamically
<script type=text/javascript>
$(document).ready(function(){
$('#addtopurchase').click(function(e){
alert('Clicked');
var selected = $('#s2_2 :selected');
var type = selected.parent().attr('label');
var prod = $('#s2_2 option:selected').text();
if(prod != Choose a Product...)
{
alert('In prod');
if(type == Tablets || type == Capsule)
{
alert('In tablets');
var stock = Number($('#currentstockinput').val());
var qty = Number($('#tablettosellinput').val().replace(/[^0-9.]+/g,));
if(qty < stock)
{
var pertabprice = Number($('#prodpricetabcapinput').val().replace(/[^0-9.]+/g,)).toFixed(2);
var subtotal = qty * pertabprice;
var pkgdate = $('#pkgdateinput').val();
var manufactdate = $('#manufactinput').val();
var expdate = $('#expdateinput').val();
var batchno = $('#s2_1 option:selected').text();
$('#tablebody').prepend('<tr>'+
'<td class=prodname>'+prod+'</td>'+
'<td class=pkgdate>'+pkgdate+'</td>'+
'<td class=manufactdate>'+manufactdate+'</td>'+
'<td class=expdate>'+expdate+'</td>'+
'<td class=batchno>'+batchno+'</td>'+
'<td class=unitprice>'+pertabprice+'</td>'+
'<td class=qty>'+qty+'</td>'+
'<td class=subtot>'+subtotal+'</td>'+
'<td>'+
'<button class=btn btn-link type=button>Remove</button>'+
'</td>'+
'</tr>');
}
else
{
alert('Not enough Stock');
}
loadgrandtotal();
}
else
{
var stock = Number($('#currentstockinput').val());
var qty = Number($('#qtytosellinput').val().replace(/[^0-9.]+/g,));
if(qty < stock)
{
var prodprice = Number($('#prodpriceinput').val().replace(/[^0-9.]+/g,)).toFixed(2);
var subtotal = qty * prodprice;
var pkgdate = $('#pkgdateinput').val();
var manufactdate = $('#manufactinput').val();
var expdate = $('#expdateinput').val();
var batchno = $('#s2_1 option:selected').text();
$('#tablebody').prepend('<tr>'+
'<td class=prodname>'+prod+'</td>'+
'<td class=pkgdate>'+pkgdate+'</td>'+
'<td class=manufactdate>'+manufactdate+'</td>'+
'<td class=expdate>'+expdate+'</td>'+
'<td class=batchno>'+batchno+'</td>'+
'<td class=unitprice>'+prodprice+'</td>'+
'<td class=qty>'+qty+'</td>'+
'<td class=subtot>'+subtotal+'</td>'+
'<td>'+
'<button class=btn btn-link type=button>Remove</button>'+
'</td>'+
'</tr>');
}
else
{
alert('Not enough Stock');
}
}
loadgrandtotal();
}
else
{
}
})
});
</script>
Here is the problem. This script should calculate all the subtotals and generate Grand Total
But this script doesn't seem to work and I am not able to figure out why. The td values are read from class .subtot which is associated with a td and is generated dynamically using above script
<script type=text/javascript>
function loadgrandtotal()
{
var sum=0;
var prodprice = 0;
$('#tSortable_2 tbody tr').each(function() {
var prodprice = Number($(this).find(.subtot).text()).toFixed(2);
sum = sum + prodprice;
});
}
</script>
More From » jquery
