– here in the menu page i have form which is includ the form of menu items and add to favourites button (wishlist) when i add it to the favourites it add in the database fine, but it reload the page i tried AJAX request and update the button text without reloading the page, but it didn’t work need some help. Thanks
menu.php and script
<div class="wrapper wrapp-menu-item">
<div class="menu-item flex-row zoom-gallery">
<?php
$select_products = $conn->prepare("SELECT * FROM `products`");
$select_products->execute();
if($select_products->rowCount() > 0) {
while($fetch_product = $select_products->fetch(PDO::FETCH_ASSOC)) {
?>
<div class="single-menu-item" data-category="pizzas">
// menu form
<form action="" method="post" onsubmit="onFormSubmit();">
<input type="hidden" name="pid" value="<?= $fetch_product['id']; ?>">
<input type="hidden" name="name" value="<?= $fetch_product['name']; ?>">
<input type="hidden" name="last_name" value="<?= $fetch_product['last_name']; ?>">
<input type="hidden" name="description" value="<?= $fetch_product['description']; ?>">
<input type="hidden" name="details" value="<?= $fetch_product['details']; ?>">
<input type="hidden" name="component" value="<?= $fetch_product['component']; ?>">
<input type="hidden" name="price" value="<?= $fetch_product['price']; ?>">
<input type="hidden" name="image" value="<?= $fetch_product['image_01']; ?>">
<img src="uploaded_img/<?= $fetch_product['image_01']; ?>" alt="">
<div class="single-menu-item-content">
<h3>
<?= $fetch_product['name']; ?>
</h3>
<h5>
<?= $fetch_product['last_name']; ?>
</h5>
<p>
<?= $fetch_product['description']; ?>
</p>
<p><b>
<?= $fetch_product['details']; ?>
</b>
</p>
<p>
<?= $fetch_product['component']; ?>
</p>
<div class="b-f">
<p class="price">
<?= $fetch_product['price']; ?>le
</p>
// submit button
<button class="fav-btn" type="submit" name="add_to_wishlist">
<?php echo $button_text; ?>
<svg class="heart-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
fill="#000000">
<path
d="M12 21.35l-1.45-1.32C5.4 14.25 2 11.45 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C15.09 3.81 16.76 3 18.5 3 21.58 3 24 5.42 24 8.5c0 2.95-3.4 5.75-8.55 11.54L12 21.35z" />
</svg>
</button>
</div>
</div>
</form>
</div>
<?php
}
} else {
echo '<p class="empty">no products found!</p>';
}
?>
</div>
</div>
<script>
$(document).ready(function() {
$(".fav-btn").click(function(event) {
event.preventDefault();
var productId = $(this).closest('.single-menu-item').find('input[name="pid"]').val();
var name = $(this).closest('.single-menu-item').find('input[name="name"]').val();
var lastname = $(this).closest('.single-menu-item').find('input[name="last_name"]').val();
var description = $(this).closest('.single-menu-item').find('input[name="description"]')
.val();
var details = $(this).closest('.single-menu-item').find('input[name="details"]').val();
var component = $(this).closest('.single-menu-item').find('input[name="component"]').val();
var price = $(this).closest('.single-menu-item').find('input[name="price"]').val();
var image = $(this).closest('.single-menu-item').find('input[name="image"]').val();
$.ajax({
url: 'components/wishlist_cart.php',
type: 'post',
data: {
add_to_wishlist: true,
pid: productId,
name: name,
last_name: lastname,
description: description,
details: details,
component: component,
price: price,
image: image
},
success: function(data) {
// Handle the response, update the button text or show a message
alert(data.message);
// Optional: Update the button text
if (data.message.includes('added')) {
$(this).text('Added to Favorites');
}
},
error: function(error) {
console.error('Error:', error);
}
});
});
});
</script>
and here is the wishlist_cart.php to handle the submtions
<?php
session_start();
include 'components/connect.php';
// Check if the form is submitted
if(isset($_POST['add_to_wishlist'])) {
$pid = $_POST['pid'];
$name = $_POST['name'];
$last_name = $_POST['last_name'];
$description = $_POST['description'];
$details = $_POST['details'];
$component = $_POST['component'];
$price = $_POST['price'];
$image = $_POST['image'];
// Use session ID as a unique identifier
$user_identifier = session_id();
// Check if the item is already in the wishlist
$check_wishlist_numbers = $conn->prepare("SELECT * FROM `wishlist` WHERE pid = ? AND user_identifier = ?");
$check_wishlist_numbers->execute([$pid, $user_identifier]);
if($check_wishlist_numbers->rowCount() > 0) {
$message[] = 'Item is already in the wishlist!';
$button_text = 'Added to Favorites';
} else {
// Insert the wishlist item into the database
$insert_wishlist = $conn->prepare("INSERT INTO `wishlist` (user_identifier, pid, name, last_name, description, details, component, price, image) VALUES (?,?,?,?,?,?,?,?,?)");
$insert_wishlist->execute([$user_identifier, $pid, $name, $last_name, $description, $details, $component, $price, $image]);
$message[] = 'Item added to wishlist!';
$button_text = 'Added to Favorites';
}
} else {
// Default button text
$button_text = 'Add to Favorites';
}
?>
2
Answers
You should attach the event listener onto the form onSubmit, not the button onClick
In general if you want to prevent the default handling of an event, you can call
.preventDefault(), like this:But this way you will not even send the request. So you need to implement AJAX request sending inside your event handler as well. See https://www.geeksforgeeks.org/ajax-xmlhttprequest-object/ for more details.