event.preventDefault() doesn't work and form still submits - php

Question

I want to use event.preventDefault(); but my form still submitts.
and gives me a page with json response. There isn't any error in my console.
Here is my scripts:
$(document).ready(function() {
$('#add_to_cart ').on('submit', function(event) {
event.preventDefault();
var $form = $(event.target);
var data = $form.serialize();
$.ajax({
url: $form.attr('action'),
type: $form.attr('method'),
data: data,
success: function(response, status, xhr) {
var message = response.message;
showToastMessage(message, 'toast-success');
}
}).fail(function(xhr, textStatus) {
var message = "Error.";
if (xhr.responseText) {
var error = JSON.parse(xhr.responseText);
if (error) {
error = error.message;
if (error) {
message = error;
}
}
}
showToastMessage(message, 'toast-error')
});
return false;
});
});
function showToastMessage(message, type) {
var $toastElem = $("#snackbar");
$toastElem.className = "show";
$toastElem.html(message).removeClass('toast-success').removeClass('toast-error').addClass(type).addClass('show');
}
I have seen most of the question about this problom, but I still have problom.
html:
<form action="{{ route('cart.add', $product->id) }}" method="POST" id="add_to_cart">
<a href="javascript:{}" rel="nofollow" data-nid="4165" class="cart-button ripple add-to-cart has-ripple" onclick="parent().submit();";>add</a>
</form>

Answer 1

This is your problem:
<a href="javascript:{}" rel="nofollow" data-nid="4165" class="cart-button ripple add-to-cart has-ripple" onclick="parent().submit();";>add</a>
Submit events are only triggered by the form submission is triggered by standard submission methods (like submit buttons).
Calling the submit() method of the form using JavaScript will bypass the submit event entirely.
Since the event doesn't fire, the event listener function isn't called, so event.preventDefault() is never called.
Use a submit button instead of a link that doesn't go to a useful URL with some JS attached to it.