I tried submitting the forms without jquery Ajax and it worked perfectly well. But when I apply jquery Ajax, it submits only the first form in the loop. I have tried giving them a different id but its still not working. I don't know if I've missed it somewhere. Please help me out. This is my php code containing the form.
<?php
$i = 0;
while($row = $products->fetch(PDO::FETCH_ASSOC)){
$image = $row['productimage'];
$price = $row['productprice'];
$id = $row['productid'];
$name = $row['productname'];
echo '<form method="post" class="cart" id="form'.$i.'">';
echo '<div class="col-sm-3">';
echo '<div class="product-image-wrapper">';
echo '<div class="single-products">';
echo '<div class="productinfo text-center">';
echo '<img src="'.$image.'" />';
echo '<input type="hidden" name="amount" value=1>';
echo '<input id="input" class="price" name="price" value="'.$price.'"
readonly>';
echo '<input type="hidden" name="productid" value="'.$id.'">';
echo '<p>'.$name.'</p>';
echo '<input name="submit" class="btn btn-default add-to-cart" name="addto"
type="submit" value="Add to cart">
</div></div>
</div>
</div>
</form>';
$i++;
};
?>
And this is my jquery Ajax script
$(document).ready(function(){
$(".cart").on('submit', function(e) {
e.preventDefault();
$.ajax({
url: 'cartprocess.php',
type: "POST",
data: $(this).serialize(),
success: function(data){
$("#error").html("Updating...").delay(1000).fadeOut(1000, function(){
$("#error").fadeIn(1000).html("updated!");
});
},
});
});
});
