event.preventDefault()不起作用,并且表单仍在提交

时间:2019-05-20 06:29:55

标签: php jquery html ajax

我想使用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>

1 个答案:

答案 0 :(得分:0)

这是您的问题:

<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链接的链接。