I have the following setup: https://jsfiddle.net/uosLke60/
input.Add_To_Cart_Button {
background-color: #000;
color: #fff;
border: none;
font: inherit;
cursor: pointer;
font-size: 13px;
margin-bottom: 40px;
width: 120px;
-webkit-appearance: none;
border-radius: 0;
}<div class="Product_Card_Button">
<form method="post" action="/cart/add">
<quantity-input class="quantity" style="width: 120px; min-height: 25.4px; display: inline-flex;">
<button class="quantity__button no-js-hidden" name="minus" type="button"> - </button>
<input class="quantity__input" type="number" name="quantity" id="quantity" min="1" value="1" style="text-align: center;">
<button class="quantity__button no-js-hidden" name="plus" type="button">+</button>
</quantity-input>
<br>
<input type="submit" value="Add to cart" class="Add_To_Cart_Button" />
</form>
</div>When the add to cart button is pressed, the page refreshes. How can I adjust it so that the product is added to cart without the page refresh? I have tried a number of jQuery solutions suggested in other posts but without any luck. Any suggestions would be helpful. Thanks.
You should listen for the submit event on your form and:
event.preventDefault() which blocks the default action (in your case the form submit)return false, which ultimately cancels the eventI would do something like this
function handleAddToCart(form) {
const url = form.getAttribute("action");
const formData = new FormData(form);
doSomePost(url, formData);
}
// Cache this if possible
document.querySelector("[add-to-cart-form]")
.addEventListener("submit", (e) => {
e.preventDefault();
handleAddToCart(e.target);
return false;
});
I updated your fiddle as well => fiddle