Closed. This question needs debugging details. It is not currently accepting answers.
</div>
</div>
</div>
<hr class="my12 outline-none baw0 bb bc-powder-2">
<div class="grid fw-nowrap fc-black-600">
<div class="grid--cell mr8">
<svg aria-hidden="true" class="svg-icon iconLightbulb" width="18" height="18" viewbox="0 0 18 18"><path d="M9.5.5a.5.5 0 0 0-1 0v.25a.5.5 0 0 0 1 0V.5zm5.6 2.1a.5.5 0 0 0-.7-.7l-.25.25a.5.5 0 0 0 .7.7l.25-.25zM1 7.5c0-.28.22-.5.5-.5H2a.5.5 0 0 1 0 1h-.5a.5.5 0 0 1-.5-.5zm14.5 0c0-.28.22-.5.5-.5h.5a.5.5 0 0 1 0 1H16a.5.5 0 0 1-.5-.5zM2.9 1.9c.2-.2.5-.2.7 0l.25.25a.5.5 0 1 1-.7.7L2.9 2.6a.5.5 0 0 1 0-.7z" fill-opacity=".4"></path><path opacity=".4" d="M7 16h4v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1z" fill="#3F3F3F"></path><path d="M15 8a6 6 0 0 1-3.5 5.46V14a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-.54A6 6 0 1 1 15 8zm-4.15-3.85a.5.5 0 0 0-.7.7l2 2a.5.5 0 0 0 .7-.7l-2-2z" fill="#FFC166"></path></svg>
</div>
<div class="grid--cell lh-md">
<p class="mb0">
<b>Want to improve this question?</b> <a href="/posts/51324260/edit">Update the question</a> so it's <a href="/help/on-topic">on-topic</a> for Stack Overflow.
</p>
<p class="mb0 mt6">Closed <span title="2018-07-16 20:50:48Z" class="relativetime">2 years ago</span>.</p>
</div>
</div>
</aside>
I have created a simple product inventory control form using query.
It consists of(product name, price, qty, amount) after filling all the fields and clicks add button all details it will append on the table row successfully.
After adding the price one by one, finally calculate and display the final total successfully.
I put the delete button next to the product.
Hitting delete button on particular row will be delete it successfully, but the final total amount didn't reduce once I delete the product from the product table.
I don't know how to reduce the price what I tried so far. i wrote it below. can anyone go through the code and give the good solution for it?
Form
<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>
<td>
<input type="text" class="form-control" placeholder="barcode" id="barcode" name="barcode" required>
</td>
<td>
<label id="pro_name" name="pname" id="pname"></label>
<input type="text" class="form-control" placeholder="barcode" id="pname" name="pname" >
</td>
<td>
<input type="text" class="form-control pro_price" id="pro_price" name="pro_price"
placeholder="price" >
</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="number" 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>
<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>
Final total
<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>
JQuery
<script>
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);
///$('#frmProject')[0].reset();
}
var total=0;
function addRow(product) {
console.log(product.total_cost);
var $tableB = $('#product_list tbody');
var $row = $("<tr><td><Button type='button' name = 'record' class='btn btn-warning btn-xs' name='record' onclick='deleterow(this)' >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);
total += Number(product.total_cost);
$('#total').val(total);
console.log(product.total_cost);
$row.find('deleterow').click(function(event) {
deleteRow($(event.currentTarget).parent('tr'));
});
$tableB.append($row);
onRowAdded($row);
}
function deleterow(e)
{
e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);
total -= Number(product.total_cost);
$('#total').val(total);
}
function deleteRow(row) {
console.log(product.total_cost);
total -= Number(product.total_cost);
$("#tot").val(tot);
$(row).remove();
onRowRemoved();
}
function updateTotal() {
}
function onRowAdded(row) {
updateTotal();
}
function onRowRemoved(roe) {
updateTotal();
}
</script>
</div>
