Ok so I want to say I'm sorry first off if this has been asked before. I can't seem to find it in the asked questions section though, and I've spent hours looking for what I need.
So to start off with. I'm pulling rows of data from a table off my database -> Products. Then adding them to the cart. I know how to do this in PHP but I'm new to JavaScript and Ajax. I do have my code working where I can submit one form to add to the database, but it's not working for any after the first one.
I'll include all my code too, but I just need help figuring out how to add each individual item to the cart. It seems simple to me logically, but I can't figure out the correct way to do this and appreciate any help!
Here is my code for the page showing the database products.
//*script*//
<script type="text/javascript">
$(document).ready(function() {
$("#FormSubmitAddToCart").click(function (e) {
e.preventDefault();
if($("#qtyArea").val()==='0')
{
alert("Please enter a quantity!");
return false;
}
$("#FormSubmitAddToCart").hide(); //hide submit button
$("#LoadingImage").show(); //show loading image
var id = 'id='+ $("#idArea").val();
var qty = 'qty='+ $("#qtyArea").val();
var myData = id+'&'+qty;
//alert(myData);
jQuery.ajax({
type: "POST", // HTTP method POST or GET
url: "response.php", //Where to make Ajax calls
dataType:"text", // Data type, HTML, json etc.
data:myData, //Form variables
success:function(response){
$("#responds").append(response);
$("#idArea").val(''); //empty text field on successful
$("#qtyArea").val(''); //empty text field on successful
$("#FormSubmitAddToCart").show(); //show submit button
$("#LoadingImage").hide(); //hide loading image
},
error:function (xhr, ajaxOptions, thrownError){
$("#FormSubmitAddToCart").show(); //show submit button
$("#LoadingImage").hide(); //hide loading image
alert(thrownError);
}
});
});
</script>
//*selects products from database*//
<?php
include_once("config.php");
$results = $mysqli->query("SELECT * FROM products");
while($row = $results->fetch_assoc()) {
echo '<li id="item_'.$row["id"].'">
<div class="del_wrapper">
'.$row["name"].' - $'.$row["price"].'
<input type="hidden" id="idArea" value="'.$row["id"].'">
<input type="number" id="qtyArea" value="0">
<button id="FormSubmitAddToCart">Add to Cart</button>
</div>
</li><br />';
}
?>
And my response page is working and posting the first form data to the cart table.
I know I need some kind of loop or way to id what form is being submitted with the button, but not sure how to do this. Any suggestions? And just to let you know, I do secure my stuff after I get it working. Thanks! :D
************************ FIXED CODE THAT WORKS BELOW THESE LINES **************************
Here is the full update that now works for me.
Script Code
<script type="text/javascript">
$(document).ready(function(){
$('[id^=FormSubmitAddToCart]').click(function(){
// now this is your product id, and now you should
var p_id= $(this).attr('id').replace('FormSubmitAddToCart-', '');
// this is your quantity
var p_qty = $('#qtyArea-'+p_id).val();
// + now you know the product id and quantity, so you should handle the rest
var myData = 'id='+p_id+'&qty='+p_qty;
alert(myData);
// throw new Error("Something went badly wrong!");
jQuery.ajax({
type: "POST", // HTTP method POST or GET
url: "response.php", //Where to make Ajax calls
dataType:"text", // Data type, HTML, json etc.
data:myData, //Form variables
success:function(response){
$("#responds").append(response);
$("#idArea").val(''); //empty text field on successful
$("#qtyArea").val(''); //empty text field on successful
$("#FormSubmitAddToCart").show(); //show submit button
$("#LoadingImage").hide(); //hide loading image
},
error:function (xhr, ajaxOptions, thrownError){
$("#FormSubmitAddToCart").show(); //show submit button
$("#LoadingImage").hide(); //hide loading image
alert(thrownError);
}
});
})
});
</script>
Form Code for submission:
<?php
include_once("config.php");
$results = $mysqli->query("SELECT * FROM products");
while($row = $results->fetch_assoc()) {
echo '<li id="item_'.$row["id"].'">
<div class="del_wrapper">
'.$row["name"].' - $'.$row["price"].'
<input type="hidden" id="idArea-'.$row["id"].'" value="'.$row["id"].'"/>
<input type="number" id="qtyArea-'.$row["id"].'" value="0">
<button id="FormSubmitAddToCart-'.$row["id"].'">Add to Cart</button>
</div>
</li><br />';
}
?>
response.php page
<?php
//include db configuration file
include_once("config.php");
if(isset($_POST["qty"]) && ($_POST["qty"] != 0) ) {
//check $_POST["content_txt"] is not empty
//sanitize post value, PHP filter FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH Strip tags, encode special characters.
$MID = "43";
$ID = $_POST["id"];
$QTY = $_POST["qty"];
echo $ID.$QTY;
// Insert sanitize string in record
//$insert_row = $mysqli->query("INSERT INTO add_delete_record(content,qty) VALUES('".$contentToSave.",".$QTY."')");
$insert_row = $mysqli->prepare('INSERT INTO orders(members_id, product_id, quantity) VALUES (?,?,?)');
$insert_row->bind_param('iii', $MID, $ID, $QTY);
$insert_row->execute();
$insert_row->close();
if($insert_row)
{
//Record was successfully inserted, respond result back to index page
$my_id = $mysqli->insert_id; //Get ID of last inserted row from MySQL
echo '<li id="item_'.$my_id.'">';
echo '<div class="del_wrapper"><a href="#" class="del_button" id="del-'.$my_id.'">';
echo '<img src="images/icon_del.gif" border="0" />';
echo '</a></div>';
echo $ID.'-'.$QTY.'</li>';
$mysqli->close(); //close db connection
}else{
//header('HTTP/1.1 500 '.mysql_error()); //display sql errors.. must not output sql errors in live mode.
header('HTTP/1.1 500 Looks like mysql error, could not insert record!');
exit();
}
}
?>
