I'm trying to fetch the result based on the user's selection in the select element. All it shows are just the product_price1 when I try to select the other price range, the product price will not be able to change according to my selection. It will only show the first price of the product. I did place the id of each element in the correct way but it still not be able to work properly.
But i do not know where is the mistake i made, it just can't seems to fetch the correct result. Here are my codes:
<table class="table">
<thead class="text-primary">
<th style=" position: sticky;top: 0; background: white";>
Product
</th>
<th style=" position: sticky;top: 0; background: white";>
Name
</th>
<th style=" position: sticky;top: 0; background: white";>
Avaliable Stock
</th>
<th style=" position: sticky;top: 0; background: white";>
Item Price(RM)
</th>
<th style=" position: sticky;top: 0; background: white";>
Insert Product Quantity
</th>
</thead>
<tbody id="products">
<?php
$product_id = $_REQUEST['id'];
$ids = explode(",",$product_id);
$ids = array_splice($ids, 0);
foreach($ids as $product_id){
$sql = "SELECT *, products.id as product_id FROM products
LEFT JOIN sellers ON products.seller_id = sellers.id
WHERE products.id = '".$product_id."'
ORDER BY product_created DESC ";
$query = $conn->query($sql);
{
while ($row = $query->fetch_assoc()) {
$max = $row['product_stock'];
?>
<tr>
<td>
<?php echo $row['product_title']; ?>
</td>
<td>
<?php echo $row['product_stock']; ?> <?php echo $row['product_unit']; ?>
</td>
<td>
<div class="col-md-6">
<input type="number" name="cart_qty" step=".01" class="form-control text-center" required>
</div>
</td>
<td>
<select name="price_range" id="price_range" class="form-control">
<option value="price_range1" selected><?php echo $row['weight_range1']; ?> <?php echo $row['product_unit']; ?></option>
<option value="price_range2"> <?php echo $row['weight_range2']; ?><?php echo $row['product_unit']; ?></option>
<option value="price_range3"><?php echo $row['weight_range3']; ?><?php echo $row['product_unit']; ?></option>
<option value="price_range4"><?php echo $row['weight_range4']; ?> <?php echo $row['product_unit']; ?></option>
</select>
</td>
<td>
<div class="col-12 my-auto">RM
<span id="product_price">
<input type="hidden" name="cart_price" value="<?php echo $row['product_price1']; ?>">
<?php echo $row['product_price1']; ?>
</span>/<?php echo $row['product_unit']; ?>
</td>
</tr>
</div>
</div>
<?php
}
}
}
?>
</tbody>
</table>
I use AJAX method to POST the selection result, here are the codes
<script>
$(document).ready(function() {
$('#price_range').on('change', function() {
var product_id = <?php echo $product_id ?>;
var price_range = this.value;
$.ajax({
url: "includes/fetch-price.php",
type: "POST",
data: {
product_id: product_id,
price_range: price_range
},
cache: false,
success: function(result){
$("#product_price").html(result);
// console.log(price_range);
}
});
});
});
</script>
Here is my fetch-price.php
<?php
require_once "../session.php";
$product_id = $_POST["product_id"];
$price_range = $_POST["price_range"];
$sql = mysqli_query($conn,"SELECT * FROM products where id = '$product_id' ");
$scrow = mysqli_fetch_array($sql);
if($price_range == 'price_range1')
{
echo '<input type="hidden" name="cart_price" value="'.$scrow['product_price1'].'">', $scrow['product_price1'];
}
else if($price_range == 'price_range2')
{
echo '<input type="hidden" name="cart_price" value="'.$scrow['product_price2'].'">', $scrow['product_price2'];
}
else if($price_range == 'price_range3')
{
echo '<input type="hidden" name="cart_price" value="'.$scrow['product_price3'].'">', $scrow['product_price3'];
}
else if($price_range == 'price_range4')
{
echo '<input type="hidden" name="cart_price" value="'.$scrow['product_price4'].'">',$scrow['product_price4'];
}
?>
