get product data from database on clicking product tile

Question

so i am using 'while' to display products on my home page and i want that when the user clicks on a product tile it's redirected to a file product_page.php which contains all the details about that specific product i don't know if it's because i am using 'a' tag but it's not working

<?php
include 'config.php';
$stmt = $conn->prepare("SELECT * FROM product");
$stmt->execute();
$result = $stmt->get_result();
while($row = $result->fetch_assoc()):
?> 
<div class="col-sm-6 col-md-4 col-lg-3 mb-2" > 
<a href="product_page.php">
<div class="card-deck" id="product"> 
<div class="card border border-light ">
<img class="card-img-top" src="<?= $row['product_image'] ?>" >
<div class="card-body border border-light" style="background-color: #ffffff">
  <h4 class="card-title text-center text-info"><?= $row['product_name'] ?></h4>
  <h5 class="card-text text-center text-danger">Rs. <?= number_format($row['product_price'],2) ?> 
</h5> 
</div>
<div class="card-footer border border-light" style="background-color: #ffffff">
<form action="" class="form-submit">
  <input type="hidden" class="pid" value="<?= $row['id']?>">
  <input type="hidden" class="pname" value="<?= $row['product_name']?>">
  <input type="hidden" class="pprice" value="<?= $row['product_price']?>">
  <input type="hidden" class="pimage" value="<?= $row['product_image']?>">
  <input type="hidden" class="pcode" value="<?= $row['product_code']?>">
  <button class="btn btn-block addItemBtn" style="background-color: #FE701E; color:#ffffff">Add To 
   Cart</button>
  </form>
</div>
</div>
</div>
</a>
</div>

<?php endwhile; ?>

this is my code from action.php

if(isset($_POST['pid']))
{
$pid = $_POST['pid'];
$pname = $_POST['pname'];
$pprice = $_POST['pprice'];
$pimage = $_POST['pimage'];
$stmt = $conn->prepare("SELECT * FROM product WHERE pid=? LIMIT 1");
$stmt->bind_param("i",$pid);
$stmt->execute();
$pcount=mysqli_num_rows($stmt);
$res = $stmt->get_result();
$r = $res->fetch_assoc();
if($pcode>0)
{
$_SESSION['product_name'] =$r['product_name'];
$_SESSION['product_price'] =$r['product_price'];
$_SESSION['product_image'] =$r['product_image'];
header("Location:product_page.php");
}

here is the ajax request

$(document).ready(function(){
  $("#product").click(function(e){
    e.preventDefault();
    var $form =$(this).closest(".form-submit");
    var pid = $form.find(".pid").val();
    var pname = $form.find(".pname").val();
    var pprice = $form.find(".pprice").val();
    var pimage = $form.find(".pimage").val();
    var pcode = $form.find(".pcode").val();

    $.ajax({
      url:'action.php',
      method:'post',
      data:{pid:pid,pname:pname,pprice:pprice,pimage:pimage,pcode:pcode},
      success:function(response){
                 }
    });
  });});

re `#product` - this might help [does id have to be unique](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page) — jibsteroos, Jan 12 '20 at 00:21
You have multiple issues: 1) `#product` is used in a loop, which makes it repeated and non-unique. Better to use `class="product" data-id="= $row['id'] ?>"` 2) Non-destructive (read request) should only be GET. No need for forms or redirecting. Just send the ID in the Get request. 3) Your ajax (if you choose to use it) doesn't do anything on success. Your header to change location just means it will return product_page.php to the calling ajax function. From what I gather, you're not even wanting ajax functionality here; you want it to redirect. — Tim Morton, Jan 12 '20 at 03:31

score 0 · Answer 1 · answered Jan 12 '20 at 00:42

You are calling ajax request on #product. As you are display products in a loop, #product is not unique. ID of any element of html should be unique in a same page. I suggest you to give id to <form> instead <div> So either you can create a unique id like -

<form action="" class="form-submit" id="product_<?php echo $row['id']; ?>">

And then you can call a ajax request. -

$(document).on('submit', '[id^="product_"]', function(){
  e.preventDefault();
    var $form =$(this).closest(".form-submit");
    var pid = $form.find(".pid").val();
    var pname = $form.find(".pname").val();
    var pprice = $form.find(".pprice").val();
    var pimage = $form.find(".pimage").val();
    var pcode = $form.find(".pcode").val();

    $.ajax({
      url:'action.php',
      method:'post',
      data:{pid:pid,pname:pname,pprice:pprice,pimage:pimage,pcode:pcode},
      success:function(response){
                 }
    });
});

score 0 · Accepted Answer · answered Jan 12 '20 at 01:23

Your approach is confusing. Why do you have a single link to products.php? You could try one of the following approaches

Option 1 This is a better option if you don't want any data other than the ID visible in the URL. Pass the ID only via the link to products.php. There, you fetch the rest of the data you need.

<a href="products.php?id=<?php echo $row['id'];?>Link text here, which could be the ID</a>

Put that inside your loop and in products.php you simply fetch the data you need inside that page by querying the database based on the ID from the link.

Option 2 This is probably easier since you already have all the data, unless you don't want some of that data displayed as part of the URL) Pass all of those variables in your url as GET parameters

echo '<a href="products.php?id=' . $row['id'] . '&pname= . $row['product_name'] . '>Link text here</a>"

Just keep adding all your parameters using the & operator.

get product data from database on clicking product tile

2 Answers2