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>

提交事件仅由表单提交触发，而表单提交由标准提交方法（如提交按钮）触发。

使用JavaScript调用表单的submit()方法将完全绕过Submit事件。

由于事件不会触发，因此不会调用事件侦听器功能，因此永远不会调用event.preventDefault()。

使用一个提交按钮，而不是一个没有附加有用的JS链接的链接。

event.preventDefault（）不起作用，并且表单仍在提交

1 个答案: