event.preventDefault () не работает и форма все еще отправляет

Question

Я хочу использовать event.preventDefault (); но моя форма все еще подает. и дает мне страницу с ответом JSON. В моей консоли нет ошибок.

Вот мои сценарии:

$(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');

}

Я видел большую часть вопроса об этом пробломе, но у меня все еще есть проблом.

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

Это ваша проблема:

<a href="javascript:{}" rel="nofollow" data-nid="4165" class="cart-button ripple add-to-cart has-ripple" onclick="parent().submit();";>add</a>

События отправки инициируются только при отправке формы при стандартных методах отправки (например, кнопки отправки).

Вызов метода submit() формы с использованием JavaScript полностью пропустит событие submit.

Поскольку событие не вызывается, функция прослушивателя событий не вызывается, поэтому event.preventDefault() никогда не вызывается.

Используйте кнопку отправки вместо ссылки, которая не ведет на полезный URL-адрес, к которому прикреплен какой-либо JS.