При нажатии кнопки «Купить» должен отправляться AJAX-запрос (без перезагрузки страницы) к файлу add_to_cart.php?cart=add$col=X, где X — текущее кол-во товаров.
Стартовая страница с формой:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Покупка товара</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<form id="form">
<input type="text" name="count" placeholder="Количество" required /><br />
<button class="buy">Купить</button>
</form>
<a href="add_to_cart.php">add_to_cart.php</a>
<script src="jquery-3.3.1.min.js"></script>
<script src="common.js"></script>
</body>
</html>
JS код:
$(document).ready(function() {
$("#form").submit(function() {
$.ajax({
type: "GET",
url: "add_to_cart.php",
data: {cart: 'add', col: 'x'},
success: function(data) {
alert("Товар добавлен в корзину");
},
error: function(xhr, str){
alert("Возникла ошибка!");
}
});
});
});
Пытался вывести значения. Безрезультатно.
<?php
$cart = $_GET['cart'];
$col = $_GET['col'];
echo $cart;
echo $col;
?>
Появляется сообщение "Товар добавлен", но когда перехожу к странице add_to_cart.php в адресной строке ничего не добавляется. Значения тоже не выводятся.
Хочу потом добавить возможность увеличения/уменьшения кол-ва товаров при помощи соответствующих кнопок. Чтобы не приходилось вводить количество.
