I want to create a return invoice. I insert the data from sql into a table in html/php. I want to select two products (for example rows 3 and 5) and js to make the correct calculation only for these products. At this moment, if I select rows 3 and 5, js does the calculations for the first two products. In fact, it takes my turn 1 and adds the next one. How can this be resolved?
$(document).ready(function() {
$(document).on('click', '#checkAll', function() {
$(".checkbox").prop("checked", this.checked);
});
$(document).on('change', function stornSelectedProducts() {
var checkboxes = document.querySelectorAll('.checkbox');
var count = 0;
checkboxes.forEach(function(checkbox) {
if (checkbox.checked) {
count++;
$('#total_item').val(count);
}
});
cal_final_total(count);
});
update();
function cal_final_total(count) {
var final_item_total = 0;
var final_total_vat = 0;
var total_items_vat_0 = 0;
for (j = 1; j <= count; j++) {
var quantity = 0;
var price = 0;
var actual_amount = 0;
var tax1_rate = 0;
var tax1_amount = 0;
var item_total = 0;
quantity = $('#order_item_quantity' + j).val();
if (quantity > 0) {
price = $('#order_item_price' + j).val();
if (price > 0) {
actual_amount = parseFloat(quantity) * parseFloat(price);
$('#order_item_actual_amount' + j).val(actual_amount);
tax1_rate = $('#order_item_tax1_rate' + j).val();
if (tax1_rate > 0) {
tax1_amount = parseFloat(actual_amount) * parseFloat(tax1_rate) / 100;
$('#order_item_tax1_amount' + j).val(tax1_amount);
}
total_vat_0 = parseFloat(actual_amount);
total_items_vat_0 = parseFloat(total_items_vat_0) + parseFloat(total_vat_0);
$('#order_item_actual_amount' + j).val(total_vat_0);
total_vat = parseFloat(tax1_amount);
final_total_vat = parseFloat(final_total_vat) + parseFloat(total_vat);
$('#order_item_vat_amount' + j).val(total_vat);
item_total = parseFloat(actual_amount) + parseFloat(tax1_amount);
final_item_total = parseFloat(final_item_total) + parseFloat(item_total);
$('#order_item_final_amount' + j).val(item_total);
}
}
}
$('#final_total_amt').text(final_item_total);
$('#final_total_amt_val').val(final_item_total);
$('#total_amt_vat_val').val(final_total_vat);
$('#total_amt_vat_0_val').val(total_items_vat_0);
}
$(document).on('blur', '.order_item_quantity', function() {
cal_final_total(count);
});
$(document).on('blur', '.order_item_price', function() {
cal_final_total(count);
});
$(document).on('blur', '.order_item_tax1_rate', function() {
cal_final_total(count);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<table id="invoicetable" class="table table-bordered">
<tr>
<th width="7%">Sr No.</th>
<th width="20%">Item Name</th>
<th width="5%">Quantity</th>
<th width="5%">Price</th>
<th width="10%">Tax1</th>
<th width="10%">Actual Amt.</th>
<th width="10%">Total TAX</th>
<th width="10%">Total</th>
<th width="1%"><input id="checkAll" type="checkbox" </th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td><span id="sr_no">1</span></td>
<td><input type="text" value="Description 1" id="item_name1" class="form-control input-sm" /></td>
<td><input type="text" value="7" id="order_item_quantity1" data-srno="1" class="form-control input-sm order_item_quantity" /></td>
<td><input type="text" value="4" id="order_item_price1" data-srno="1" readonly class="form-control order_item_price" /></td>
<td><input type="text" value="21" id="order_item_tax1_rate1" data-srno="1" readonly class="form-control order_item_tax1_rate" /></td>
<td><input type="text" value="28" id="order_item_actual_amount1" data-srno="1" class="form-control input-sm order_item_actual_amount" readonly /></td>
<td><input type="text" value="5.88" id="order_item_tax1_amount1" data-srno="1" readonly class="form-control input-sm order_item_tax1_amount" /></td>
<td><input type="text" value="33.88" id="order_item_final_amount1" data-srno="1" readonly class="form-control input-sm order_item_final_amount" /></td>
<td align="center"><input class="checkbox" id="count1" type="checkbox" onChange="stornSelectedProducts()"></td>
</tr>
<tr>
<td><span id="sr_no">2</span></td>
<td><input type="text" value="Description 2" id="item_name2" class="form-control input-sm" /></td>
<td><input type="text" value="12" id="order_item_quantity2" data-srno="2" class="form-control input-sm order_item_quantity" /></td>
<td><input type="text" value="6" id="order_item_price2" data-srno="2" readonly class="form-control input-sm number_only order_item_price" /></td>
<td><input type="text" value="21" id="order_item_tax1_rate2" data-srno="2" readonly class="form-control input-sm number_only order_item_tax1_rate" /></td>
<td><input type="text" value="72" id="order_item_actual_amount2" data-srno="2" class="form-control input-sm order_item_actual_amount" readonly /></td>
<td><input type="text" value="15.12" id="order_item_tax1_amount2" data-srno="2" readonly class="form-control input-sm order_item_tax1_amount" /></td>
<td><input type="text" value="87.12" id="order_item_final_amount2" data-srno="2" readonly class="form-control input-sm order_item_final_amount" /></td>
<td align="center"><input class="checkbox" id="count2" type="checkbox" onChange="stornSelectedProducts()"></td>
</tr>
<tr>
<td><span id="sr_no">3</span></td>
<td><input type="text" value="Description 3" id="item_name3" class="form-control input-sm" /></td>
<td><input type="text" value="2.5" id="order_item_quantity3" data-srno="3" class="form-control input-sm order_item_quantity" /></td>
<td><input type="text" value="14" id="order_item_price3" data-srno="3" readonly class="form-control input-sm number_only order_item_price" /></td>
<td><input type="text" value="21" id="order_item_tax1_rate3" data-srno="3" readonly class="form-control input-sm number_only order_item_tax1_rate" /></td>
<td><input type="text" value="35" id="order_item_actual_amount3" data-srno="3" class="form-control input-sm order_item_actual_amount" readonly /></td>
<td><input type="text" value="7.35" id="order_item_tax1_amount3" data-srno="3" readonly class="form-control input-sm order_item_tax1_amount" /></td>
<td><input type="text" value="42.35" id="order_item_final_amount3" data-srno="3" readonly class="form-control input-sm order_item_final_amount" /></td>
<td align="center"><input class="checkbox" id="count3" type="checkbox" onChange="stornSelectedProducts()"></td>
</tr>
<tr>
<td><span id="sr_no">4</span></td>
<td><input type="text" value="Description 4" id="item_name4" class="form-control input-sm" /></td>
<td><input type="text" value="2" id="order_item_quantity4" data-srno="4" class="form-control input-sm order_item_quantity" /></td>
<td><input type="text" value="8.87" id="order_item_price4" data-srno="4" readonly class="form-control input-sm number_only order_item_price" /></td>
<td><input type="text" value="21" id="order_item_tax1_rate4" data-srno="4" readonly class="form-control input-sm number_only order_item_tax1_rate" /></td>
<td><input type="text" value="17.74" id="order_item_actual_amount4" data-srno="4" class="form-control input-sm order_item_actual_amount" readonly /></td>
<td><input type="text" value="3.72" id="order_item_tax1_amount4" data-srno="4" readonly class="form-control input-sm order_item_tax1_amount" /></td>
<td><input type="text" value="21.46" id="order_item_final_amount4" data-srno="4" readonly class="form-control input-sm order_item_final_amount" /></td>
<td align="center"><input class="checkbox" id="count4" type="checkbox" onChange="stornSelectedProducts()"></td>
</tr>
<tr>
<td><span id="sr_no">5</span></td>
<td><input type="text" value="Description 5" id="item_name5" class="form-control input-sm" /></td>
<td><input type="text" value="9" id="order_item_quantity5" data-srno="5" class="form-control input-sm order_item_quantity" /></td>
<td><input type="text" value="7.87" id="order_item_price5" data-srno="5" readonly class="form-control input-sm number_only order_item_price" /></td>
<td><input type="text" value="21" id="order_item_tax1_rate5" data-srno="5" readonly class="form-control input-sm number_only order_item_tax1_rate" /></td>
<td><input type="text" value="70.83" id="order_item_actual_amount5" data-srno="5" class="form-control input-sm order_item_actual_amount" readonly /></td>
<td><input type="text" value="14.87" id="order_item_tax1_amount5" data-srno="5" readonly class="form-control input-sm order_item_tax1_amount" /></td>
<td><input type="text" value="85.70" id="order_item_final_amount5" data-srno="5" readonly class="form-control input-sm order_item_final_amount" /></td>
<td align="center"><input class="checkbox" id="count5" type="checkbox" onChange="stornSelectedProducts()"></td>
</tr>
<tr>
<td><span id="sr_no">6</span></td>
<td><input type="text" value="Description 6" id="item_name6" class="form-control input-sm" /></td>
<td><input type="text" value="7" id="order_item_quantity6" data-srno="6" class="form-control input-sm order_item_quantity" /></td>
<td><input type="text" value="7.54" id="order_item_price6" data-srno="6" readonly class="form-control input-sm number_only order_item_price" /></td>
<td><input type="text" value="21" id="order_item_tax1_rate6" data-srno="6" readonly class="form-control input-sm number_only order_item_tax1_rate" /></td>
<td><input type="text" value="52.78" id="order_item_actual_amount6" data-srno="6" class="form-control input-sm order_item_actual_amount" readonly /></td>
<td><input type="text" value="11.08" id="order_item_tax1_amount6" data-srno="6" readonly class="form-control input-sm order_item_tax1_amount" /></td>
<td><input type="text" value="63.86" id="order_item_final_amount6" data-srno="6" readonly class="form-control input-sm order_item_final_amount" /></td>
<td align="center"><input class="checkbox" id="count6" type="checkbox" onChange="stornSelectedProducts()"></td>
</tr>
</table>
<br>
<br>
<table class="table table-hover">
<tr>
<td width=50%><input type="text" class="form-control" value="Total without tax" readonly></td>
<td width=50%><input type="text" value="0.00" class="form-control" value="0.00" id="total_amt_vat_0_val" readonly></td>
</tr>
<tr>
<td width=50%><input type="text" class="form-control" value="Tax" readonly></td>
<td width=50%><input type="text" value="0.00" class="form-control" value="0.00" id="total_amt_vat_val" readonly></td>
</tr>
<tr>
<td width=50%><input type="text" class="form-control" value="Total with tax" readonly></td>
<td width=50%><input type="text" class="form-control" value="0.00" id="final_total_amt_val" readonly></td>
</tr>
<tr>
</tr>
</table>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire