使用 Javascript 检测已取消的表单帖子

Posted 2023-05-09

【中文标题】使用 Javascript 检测已取消的表单帖子

【英文标题】：Detect cancelled form post with Javascript

【发布时间】：2014-09-17 13:13:27

【问题描述】：

我正在开发一个包含大量抽象的 Web 项目 - 大量代码隐藏在视图模板、公司内部 javascript 库等中。

我被要求“劫持”表单提交按钮以在提交表单时禁用它们，以禁止额外的点击。问题是，我仍然需要提交按钮，因为它在我们系统的 99% 中用作表单输入（不是最佳实践，但我没有编写该代码！）

我所做的是当用户单击“保存”时，该按钮使用 jQuery 隐藏，并且使用微调器图标禁用的完全相同的副本被放置在其位置：

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

    clone = $(button).clone();

    clone.prop('disabled', true);

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

这适用于标准用例，但小众案例是验证 - 我无法检测表单何时无效并且按钮需要重置为标准。这尤其麻烦，因为所有验证都是在我不允许修改的面向外部的 Javascript 库中完成的。

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

【问题讨论】：

html5验证可以随时检查。如果您使用的是基于 js 的验证，那就是狂野西部，但除了 onsubmit 之外，可能还有其他方法可以运行验证；检查验证库文档。也就是说，您可能只是隐藏按钮 onsubmit 而不是像那样交换它。

【参考方案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;
);