Okay, try the following.
The JS file detects when the user clicks an option and sends out an ajax request to the updateRow.php file with the $_POST
variable of val
.
updateRow.php
takes the $_POST
variable and casts it into an integer. The query is then updated with that variable. Process the query, then echo
, print
, etc. the data in the desired HTML format. Otherwise, the data echo 'failure'.
The output that is echoed, printed, etc is then sent back to the JS file under the variable data
. If the data equals 'failure', then an error message is outputted. Otherwise, it inserts the HTML in the #row
element.
// ------ Your JS file ---------
$(function() {
$row = $("#row");
$("#update-row").on("change", function() {
var val = $("select option:selected", this).val();
$.post('updateRow.php', {
val: val
}, function(data) {
if (data == 'failure') {
$row.text("Sorry, the row does not exist");
} else {
$row.html(data);
}
});
});
});
//------- updateRow.php ---------
//Make sure path/to/updateRow.php in the JS file is updated to here
$V = (int) $_POST['val'];
$getrow = "SELECT ProdID,
ProdCatID, ID_AC_seperate, ProdImage,
ProdName, ProdPrice, ProdShippingPrice,
ProdShortDesc, ProdMediumDesc, suitable,
cart_thumb FROM accessories WHERE ProdID =" . $V;
if ( QUERY_IS_SUCCESSFUL() ) {
echo 'The <b>HTML</b> you want to display the data in';
} else {
echo 'failure';
}
<!----- HTML file ---->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="path/to/js/file.js"></script>
<form method="post" action="a34.php" id="update-row">
<select name="category">
<option value="6008">15</option>
<option value="6018">25</option>
<option value="6034">30</option>
<option value="6038">40</option>
</select>
</form>
<div id="row"></div>