使用Javascript检测取消的表单提交

Question

我正在处理一个具有很多抽象层的网络项目——大量的代码嵌入在视图模板、内部公司javascript库等中。 我被要求“劫持”表单提交按钮，在表单已经提交时禁用它们，以防止多次点击。问题是，我仍需要提交按钮，因为在我们系统中99%的情况下，它被用作表单输入（虽然不是最佳实践，但这不是我编写的代码！） 我的解决方法是，当用户点击“保存”时，使用jQuery将该按钮隐藏，并放置一个完全相同的按钮，该按钮带有一个旋转图标并被禁用：

function showSpinningButton(button){
    $(button).hide();

    clone = $(button).clone();

    clone.prop('disabled', true);

    $(button).parent().append(clone);
    clone.show();
}

这在标准使用情况下有效，但在某些情况下需要进行验证 - 我无法检测到表单无效时按钮需要重置为标准状态。尤其麻烦的是所有验证都是在外部JavaScript库中完成的，我不允许修改。

要点是：是否有DOM事件在取消已提交的表单（即onclick="return false;"）时触发，我可以附加一个处理程序来重置按钮？

- alephtwo

---

HTML5验证可以随时进行检查。如果您正在使用基于JS的验证，那么这是一个无序的过程，但可能有一种方法可以在onsubmit之外运行验证；请查看验证库文档。话虽如此，您可能只需在onsubmit时隐藏按钮，而不是像那样交换它。 - dandavis

Answer 1

您可以在验证函数上使用一个包装器：

var oldHandler = form.prop("onsubmit");
form.removeProp("onsubmit").submit(function(e) {
  var result = oldHandler.call(this, e);
  if (result == false) {
    // reset your button
  }
  return result;
});

- Daniels118