Click here to Skip to main content
15,746,813 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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>
            $cat = $conn->query("SELECT * FROM category_list order by category asc");
                    $cat_arr[$row['id']] = $row['category'];
            $product = $conn->query("SELECT * FROM medicine  order by description asc");
                $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; ?>
        <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 class="col-md-2">
            <label class="control-label">Price:</label>
            <input type="number" class="form-control text-right" name="price" id="price">
        <div class="col-md-2">
                <label class="control-label">Amount:</label>
                <input type="number" class="form-control text-right" name="amount" id="amount">
        <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 class="row">
    <table id="list" class="table table-bordered" >
            <col width="40%">
            <col width="10%">
            <col width="20%">
            <col width="25%">
            <col width="10%">
                <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>

                <th class="text-right" colspan="3">Total</th>
                <th class="text-right tamount"></th>


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));


function createRow(prod, qty, price, amnt) {
  const tr = document.createElement('tr');

  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
		$('#list .tamount').html(parseFloat(tot).toLocaleString('en-US',{style:'decimal',maximumFractionDigits:2,minimumFractionDigits:2}))


Please any help will be appreciated...Thanks
Updated 29-Sep-21 5:09am
Afzaal Ahmad Zeeshan 29-Sep-21 14:58pm    
Do you face an exact error/problem? Check your console for that please and let us know.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900