i created a html/php page to calculate a bill. i have an option select for the products, that populates from mysql database, when i select a product it will supply the corresponding price. i a have a text box beside it with amount textbox. when i select a product, and enter the quantity, onkeyup event, the amount textbox gets its value. these input values are passed to the corresponding table cells by a button click 'add'.
The problem is that the sum of the amount column does not addup as the user click the add button.
Here is what i have tried:
Thanks for helping me.
What I have tried:
<div class="row mb-3">
<div class="col-md-4">
<label class="control-label">Drugs/Services</label>
<select name="product" id="product" class="custom-select browser-default select2" >
<option value="" selected></option>
<?php
$cat = $conn->query("SELECT * FROM category_list order by category asc");
while($row=$cat->fetch_assoc()):
$cat_arr[$row['id']] = $row['category'];
endwhile;
$product = $conn->query("SELECT * FROM medicine order by description asc");
while($row=$product->fetch_assoc()):
$prod[$row['id']] = $row;
?>
<option value="<?php echo $row['id'] ?>" data-description="<?php echo $row['description'] ?>" data-price="<?php echo $row['priceprivate'] ?>"><?php echo $row['description'] ?></option>
<?php endwhile; ?>
</select>
</div>
<div class="col-md-2">
<label class="control-label">Qty:</label>
<input type="number" class="form-control text-right" step="any" id="qty" style="width:50px;" onfocus="this.value=''" onkeyup="cal_amt();" >
</div>
<div class="col-md-2">
<label class="control-label">Price:</label>
<input type="number" class="form-control text-right" name="price" id="price">
</div>
<div class="col-md-2">
<label class="control-label">Amount:</label>
<input type="number" class="form-control text-right" name="amount" id="amount">
</div>
<div class="col-md-2">
<label class="control-label"> </label>
<button class="btn btn-block btn-primary" type="button" id="add_to_list" onclick="addlist();" style="width:50px;">class="fa fa-plus"> </button>
</div>
</div>
<div class="row">
<table id="list" class="table table-bordered" >
<colgroup>
<col width="40%">
<col width="10%">
<col width="20%">
<col width="25%">
<col width="10%">
</colgroup>
<thead>
<tr>
<th class="text-center">Drug/Services</th>
<th class="text-center">Qty</th>
<th class="text-center">Price</th>
<th class="text-center">Amount</th>
<th class="text-center">action</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th class="text-right" colspan="3">Total</th>
<th class="text-right tamount"></th>
<th></th>
</tr>
</tfoot>
</table>
</div>
here is the javascript code that creates and inserts the values from the :
textboxes to the table:
function addlist () {
const prod = $("#product option:selected").text();
const qty = document.getElementById('qty').value;
const price = document.getElementById('price').value;
const amnt = document.getElementById('amount').value;
const tbody = document.querySelector('#list tbody');
tbody.appendChild(createRow(prod, qty, price, amnt));
cal_amt()
}
function createRow(prod, qty, price, amnt) {
const tr = document.createElement('tr');
tr.appendChild(createTd(prod));
tr.appendChild(createTd(qty));
tr.appendChild(createTd(price));
tr.appendChild(createTd(amnt));
return tr;
}
function createTd(value) {
const td = document.createElement('td');
td.innerText = value;
return td;
}
here is the sum code:
function cal_amt(){
var pval = document.getElementById("price").value;
var qty = document.getElementById("qty").value;
var amt = parseFloat(qty) * parseFloat(pval);
document.getElementById("amount").value = amt
tot+=parseFloat(amt);
$('[name="tamount"]').val(tot)
$('#list .tamount').html(parseFloat(tot).toLocaleString('en-US',{style:'decimal',maximumFractionDigits:2,minimumFractionDigits:2}))
}
Please any help will be appreciated...Thanks