Get Product Details In Dynamically Added Row PHP-MySql


We have created a HTML Table with Product Name, Price, Quantity and Total input field. When user clicked '+' button new row will be added. As well as, when user clicked '-' button current row will be removed.when we change the product then price will be displayed in 'price' column from product table using jQuey ajax.

In this example we used three php files,

  • config.php
  • index.php
  • get_price.php

products.sql

First We have to create 'products' table in 'db_sample' database.

CREATE TABLE  `products` (
  `pid` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `pname` varchar(45) NOT NULL DEFAULT '',
  `price` double(10,2) NOT NULL DEFAULT '0.00',
  PRIMARY KEY (`pid`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1;

config.php

<?php 
  //MySQL Db Connection
  $host_name="localhost";
  $user_name="root";
  $password="";
  $db_name="db_sample";
  $con=mysqli_connect($host_name, $user_name, $password, $db_name);
?>

index.php

<html>
  <head>
    <title>Get Product Price on Dynamically Added Row in PHP-MySQL</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <style>
      table{
        border-collapse:collapse;
      }
      td,th{
        border:1px solid #ccc;
        padding:10px;
      }
    </style>
  </head>
  <?php 
    include "config.php";
    $sql="select pid,pname from products";
    $products="<option>Select</option>";
    $res=$con->query($sql);
    if($res->num_rows>0){
      while($row=$res->fetch_assoc()){
        $products.="<option value='{$row["pid"]}'>{$row["pname"]}</option>";
      }
    }
  ?>
  <body>
    <table class='table table-bordered' >
      <thead>
        <tr> 
          <th>Product</th>
          <th>Price</th>
          <th>Qty</th>
          <th>Total</th>
          <th>Add</th>
          <th>Remove</th>
        </tr>
      </thead>
      <tbody id="tbl">
        <tr>
          <td><select class='pid'><?php echo $products; ?></select></td>
          <td><input class='price' type='text' name=''></td>
          <td><input class='qty' type='text' name=''></td>
          <td><input class='total' type='text' name=''></td>
          <td><input type='button' value='+' class='add' ></td>
          <td><input type='button' value='-' class='rmv'></td>
        </tr>
      </tbody>
    </table>
    <script>
      $(document).ready(function(){
        
        //Add Row
        $("body").on("click",".add",function(){
          var products="<?php echo $products; ?>";
          $("#tbl").append("<tr> <td><select class='pid'>"+products+"</select></td> <td><input class='price' type='text' name=''></td> <td><input class='qty' type='text' name=''></td> <td><input class='total' type='text' name=''></td> <td><input type='button' value='+' class='add' ></td> <td><input type='button' value='-' class='rmv'></td> </tr>");
        });
        
        //Remove Row
        $("body").on("click",".rmv",function(){
          $(this).parents("tr").remove();
        });
        
        //Get product price
        $("body").on("change",".pid",function(){
          var pid=$(this).val();
          var input=$(this).parents("tr").find(".price");
          $.ajax({
            url:"get_price.php",
            type:"post",
            data:{pid:pid},
            success:function(res){
              $(input).val(res);
            }
          });
        });
        
        //Find Total
        $("body").on("keyup",".qty",function(){
          var qty=Number($(this).val());
          var price=Number($(this).parents("tr").find(".price").val());
          $(this).parents("tr").find(".total").val(qty*price);
        });
      });
    </script>
  </body>
</html>

get_price.php

<?php
  include "config.php";
  $sql="select price from products where pid={$_POST["pid"]}";
  $res=$con->query($sql);
  if($res->num_rows>0){
    $row=$res->fetch_assoc();
    echo $row["price"];
  }
  else{
    echo "0";
  }
?>

Output :

Get Product Price When Change In Dynamically Added Row PHP-MySql