PHP POST form after AJAX call - php

Question

Problem: My php form does not submit.
This is my page:
It has a php rendered list of colors:
<div class="table-container">
<div>
<table class="myTable" id="myTable">
<tr class="header">
<th>Variants</th>
<th>Size</th>
<th>Price (€)</th>
</tr>
<?php
$current_name = $_GET['prod-name'];
$get_product_det = "SELECT * FROM product_details WHERE product_name='$current_name' ORDER BY position";
$run_product_det = mysqli_query($con, $get_product_det);
while ($row_product_det = mysqli_fetch_array($run_product_det)){
$id = $row_product_det['id'];
$product_variant = $row_product_det['product_variant'];
$product_size = $row_product_det['size'];
$product_price = $row_product_det['price'];
$position = $row_product_det['position'];
echo "<tr data-index='$id' data-position='$position'>
<td><a id='$id'>$product_variant</a></td>
<td>$product_size</td>
<td>$product_price</td>
</tr>";
};
?>
</table>
</div>
Each color has a unique ID. Clicking on a color fires the AJAX script that works fine:
<div class='product-det-div' id='product_details'>
<script>
var links = document.getElementsByTagName('a');
for (var i = 0, il = links.length; i < il; i++) {
links[i].onclick = function() {
var id = this.id;
var product_details = document.getElementById('product_details');
var request = new XMLHttpRequest();
request.open('POST', 'product_details.php?variant_id=' + id, true);
request.onreadystatechange = function() {
if (request.readyState === 4 & request.status === 200) {
product_details.innerHTML = request.responseText;
} else {
product_details.innerHTML = 'An error occurred during your request: ' + request.status + ' ' + request.statusText;
}
};
request.send();
};
};
</script>
</div>
When the ajax call happens, what happens to the URL of the page? I'm passing the ID of the color through the URL but when trying to GET it with PHP it seems it doesn't find it.
Here's the code of the page:
$current_id = $_REQUEST['variant_id'];
$get_product_det = "SELECT * FROM product_details WHERE id=$current_id";
$run_product_det = mysqli_query($con, $get_product_det);
while ($row_product_det = mysqli_fetch_array($run_product_det)){
$product_variant = $row_product_det['product_variant'];
$product_size = $row_product_det['size'];
$product_price = $row_product_det['price'];
echo "
<form action='' method='post'>
<h2 style='margin-bottom: 20px;'>$product_variant</h2>
<div><label>Nome Prodotto</label><input value='$product_variant'></div>
<div><label>Dimensione</label><input value='$product_size' type='number' name='product_size'></div>
<div><label>Prezzo (€)</label><input value='$product_price' id='product_price' name='product_price'></div>
<button type='submit' name='edit_variant_btn'>Send</button>
</form>
";
if(isset($_POST['edit_variant_btn'])) {
$variant = $_POST['product_size'];
$current_id = $_REQUEST['variant_id'];
$update_size = "UPDATE product_details SET size = '$variant' WHERE id = '$current_id'";
$run_update = mysqli_query($con, $update_size);
if($run_update) {
echo "<script>window.open('variable_product.php?prod-name=Polycolor', '_self');</script>";
}
}
};
?>
Thank you for your time, any help appreciated.
EDIT: I tried all the changes you all adviced, also tried $_REQUEST["variant_id"] as Banujan Balendrakumar said, but still no result.
The only way I found to make it work was to change the form action from this:
<form action='' method='post'>
to
<form action='product_details.php?variant_id=$current_id' method='post'>
This way it works because on button click, it opens that page and gets the ID value from there but it's just a way to get around the problem...
Any other ideas?

Answer 1

It's working for me....
<div class="table-container">
<div>
<table class="myTable" id="myTable">
<tr class="header">
<th>Variants</th>
<th>Size</th>
<th>Price (€)</th>
</tr>
<?php
$con = new mysqli('localhost','root','','check');
$get_product_det = "SELECT * FROM product_details ORDER BY position";
$run_product_det = mysqli_query($con, $get_product_det);
while ($row_product_det = mysqli_fetch_array($run_product_det)){
$id = $row_product_det['id'];
$product_variant = $row_product_det['product_variant'];
$product_size = $row_product_det['size'];
$product_price = $row_product_det['price'];
$position = $row_product_det['position'];
echo "<tr data-index='$id' data-position='$position'>
<td><a id='$id'>$product_variant</a></td>
<td>$product_size</td>
<td>$product_price</td>
</tr>";
};
?>
</table>
</div>
<div class='product-det-div' id='product_details'>
<script>
var links = document.getElementsByTagName('a');
for (var i = 0, il = links.length; i < il; i++) {
links[i].onclick = function() {
var id = this.id;
var product_details = document.getElementById('product_details');
var request = new XMLHttpRequest();
request.open('POST', 'product_details.php?variant_id=' + id, true);
request.onreadystatechange = function() {
if (request.readyState === 4 & request.status === 200) {
product_details.innerHTML = request.responseText;
} else {
product_details.innerHTML = 'An error occurred during your request: ' + request.status + ' ' + request.statusText;
}
};
request.send();
};
};
</script>
</div>
product details
<?php
$current_id = $_REQUEST['variant_id'];
$con = new mysqli('localhost','root','','check');
$get_product_det = "SELECT * FROM product_details WHERE id=$current_id";
$run_product_det = mysqli_query($con, $get_product_det);
while ($row_product_det = mysqli_fetch_array($run_product_det)){
$product_variant = $row_product_det['product_variant'];
$product_size = $row_product_det['size'];
$product_price = $row_product_det['price'];
echo "
<form action='' method='post'>
<h2 style='margin-bottom: 20px;'>$product_variant</h2>
<div><label>Nome Prodotto</label><input value='$product_variant'></div>
<div><label>Dimensione</label><input value='$product_size' type='number' name='product_size'></div>
<div><label>Prezzo (€)</label><input value='$product_price' id='product_price' name='product_price'></div>
<button type='submit' name='edit_variant_btn'>Send</button>
</form>
";
if(isset($_POST['edit_variant_btn'])) {
$variant = $_POST['product_size'];
$current_id = $_REQUEST['variant_id'];
$update_size = "UPDATE product_details SET size = '$variant' WHERE id = '$current_id'";
$run_update = mysqli_query($con, $update_size);
if($run_update) {
echo "<script>window.open('variable_product.php?prod-name=Polycolor', '_self');</script>";
}
}
};
?>