I have created the simple inventory control system. inventory control consist of Product Code, Product Name, Price, Qty, Amount, delete button. after fill all the fields and click add button it will append on the table row successfully below the inventory form. my problem is after adding price one by one finally I couldn't calculate the final total it didn’t display on the total textbox and if I want to delete the item click delete button item it didn't delete successfully at same time amount shouldn't decrease. I tried above problems many times but I couldn’t solve it. Please, anyone will help me to solve above problem thanks.i have attached the coding so far I what I tried was.
function addproduct() {
var product = {
barcode: $("#barcode").val(),
pname: $("#pname").val(),
pro_price: $("#pro_price").val(),
qty: $("#qty").val(),
total_cost: $("#total_cost").val(),
button: '<button type="button" class="btn btn-warning btn-xs")">delete</button>'
};
addRow(product);
}
function addRow(product) {
var $tableB = $('#product_list tbody');
var $row = $("<tr><td><Button type='button' name = 'record' class='btn btn-warning btn-xs' name='record' onclick='deleterow()' >Delete</td>"
+
"<td>" + product.barcode + "</td><td class=\"price\">" + product.pname + "</td><td>" + product.pro_price + "</td><td>" + product.qty + "</td><td>" + product.total_cost + "</td></tr>");
$row.data("barcode", product.product_code);
$row.data("pname", product.product_name);
$row.data("pro_price", product.price);
$row.data("qty", product.qty);
$row.data("total_cost", product.total_cost);
$row.find('deleterow').click(function(event) {
deleteRow($(event.currentTarget).parent('tr'));
});
$tableB.append($row);
onRowAdded($row);
}
function deleterow() {
$(this).parents("tr").remove();
}
function deleteRow(row) {
$(row).remove();
onRowRemoved();
}
function updateTotal() {
var total = $('table tbody tr').toArray().reduce(function(pre, post) {
return pre + parseFloat($(post).data('total_cost'));
}, 0);
$('table tfoot .total').text(total);
}
function onRowAdded(row) {
updateTotal();
}
function onRowRemoved(roe) {
updateTotal();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<caption> Add Products </caption>
<tr>
<th>Product Code</th>
<th>Product Name</th>
<th>Price</th>
<th>Qty</th>
<th>Amount</th>
<th style="width: 40px">Option</th>
</tr>
<tr>
<form class="card" id="frmProject">
<td>
<div>
<input type="text" class="form-control" placeholder="barcode" id="barcode" name="barcode" required>
</div>
</td>
<td>
<label id="pro_name" name="pname" id="pname"></label>
<input type="text" class="form-control" placeholder="barcode" id="pname" name="pname" disabled >
</td>
<td>
<input type="text" class="form-control pro_price" id="pro_price" name="pro_price"
placeholder="price" disabled>
</td>
<td>
<input type="number" class="form-control pro_price" id="qty" name="qty"
placeholder="qty" min="1" value="1" required>
</td>
<td>
<input type="text" class="form-control" placeholder="total_cost" id="total_cost" name="total_cost" >
</td>
<td>
<button class="btn btn-success" type="button"
onclick="addproduct()">Add
</button>
</td>
</form>
</tr>
</table>
<table class="table table-bordered" id="product_list">
<caption> Products</caption>
<thead>
<tr>
<th style="width: 40px">Remove</th>
<th>Product Code</th>
<th>Product Name</th>
<th>Unit price</th>
<th>Qty</th>
<th>Amount</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div class="form-group" align="left">
<label class="form-label">Total</label>
<input type="text" class="form-control" placeholder="Total" id="total" name="total" size="30px" required>
</div>I'm not sure but I think you were wrong here:
$('table tfoot .total').text(total);
Because total isn't a class but an id
try this:
$('#total').val(total);
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments