Hello Forum,
I am currently having issues with two label controls on my web form. These labels represent Total and GrandTotal in an invoice which I am learning to create. When I type an Item description, quantity and rate, I get a multiplication of item quantity and its rate in the Amount section; after which the “Total” label control will display the total amount by adding all the figures in the Amount section. But the issue I am facing is that when I click on the Add Item button to add Row in the Gridview, the Total Amount returns with no value. Also, the GrandTotal value disappears too. When I try to insert data from the invoice into the database table, two columns (Total and GrandTotal) is left empty
I have a video link to share what I mean. Please check the video link below
https://youtu.be/zHuTX6p7Rls
Here is my HTML and Code
JavaScript
<script type="text/javascript">
$(function () {
CalculateTotal();
});
$("body").on("change keyup", "[id*=txtQuantity],[id*=txtRate],[id*=txtVAT]", function () {
var row = $(this).closest("tr");
//Check whether Quantity value is valid Float number.
var quantity = parseFloat($.trim($(row).find("[id*=txtQuantity]").val()));
if (isNaN(quantity)) {
quantity = 0;
}
var rate = parseFloat($.trim($(row).find("[id*=txtRate]").val()));
if (isNaN(rate)) {
rate = 0;
}
//Calculate and update Row Total.
$("[id*=lblAmount]", row).html(quantity * rate);
CalculateTotal();
});
function CalculateTotal() {
//Calculate and update Grand Total.
var grandTotal = 0;
$("[id*=lblAmount]").each(function () {
if (!isNaN($(this).html())) {
grandTotal = grandTotal + parseFloat($(this).html());
}
});
$("[id*=lblTotal]").html(grandTotal);
var vat = parseInt($("[id*=txtVAT]").val()) / 100;
grandTotal = grandTotal + (grandTotal * vat);
$("[id*=lblGrandTotal]").html(grandTotal.toString());
}
</script>