如何在表单提交事件之后运行一些 JavaScript？答案

【问题标题】：How can I run some JavaScript *after* a form submit event?如何在表单提交事件之后运行一些 JavaScript？
【发布时间】：2012-08-29 15:20:28
【问题描述】：

我正在处理可能需要几秒钟才能提交的 HTML 表单。我想禁用表单中的某些字段在提交之后。

我可以在表单的submit 事件的处理程序中执行此操作，但这会在表单提交之前触发。如果我禁用这些控件，它们的值不会包含在发送到服务器的发布数据中。

我尝试在我的处理程序中取消提交事件，从表单中删除我的submit 事件处理程序，自己通过 JavaScript 提交表单，然后然后禁用控件，但问题在那里是我需要知道用户点击了哪个按钮来提交表单。此信息在原始表单提交中，但显然不在我手动触发的那个中（因为没有单击任何按钮）。

我可以尝试将此信息复制到我的手动表单提交中，但是有没有办法在表单提交后运行我的禁用代码？

【问题讨论】：

你不能在“提交”处理程序中将它们设为readonly 吗？
使用提交按钮的点击事件来禁用你的字段。
@j08691 “点击”也发生在表单提交之前；这与在“提交”处理程序中执行的操作几乎相同。
表单提交后禁用是什么意思？一个 sibmit 开始一个新的请求；表格正在消失。重点是什么？如果要防止重复提交，请禁用所有提交按钮。我想您可以将禁用的字段复制到隐藏字段，但您正在与竞争条件作斗争 - 为什么要打扰？
@DaveNewton：表单可能需要几秒钟才能真正提交，因此它的 UI 可能会在屏幕上停留的时间比您预期的要长。（我认为 - 我还没有在生产中实际测试过。）

【解决方案1】：

不要通过禁用提交按钮来允许进一步提交，您无需执行任何其他操作。或者，隐藏表单并用旋转的东西替换它，这样用户就会被迷住，以为正在发生重要的事情。

【讨论】：

【解决方案2】：

提交表单后可以触发该功能：

function name() {
    $("#target :input").attr("disabled", true);
    return true;
}

此代码将禁用从以“target”为 id 的元素继承的所有 from 字段。

这个版本只匹配所有输入元素：

function name() {
    $("#target input").attr("disabled", true);
    return true;
}

您必须包含 jQuery 库才能使此代码正常工作。

【讨论】：

【解决方案3】：

这与 sp00m 的答案几乎相同，只是它使用 Javascripts 原生提交来防止递归调用。

$('#myForm').submit(function() {
    this.submit();
    disableFields(); // your own function
    return false;
});

【讨论】：

这不会有递归表单提交的危险吗？当submit() 在onsubmit 处理程序中被调用时，它基本上是在调用自己？通常这会在第一次提交完成后停止，但如果浏览器出现延迟，可能会导致 IE 出现out of stack space 错误。

【解决方案4】：

你可以使用 jQuery 的 .post() 来提交，.button().click() 来检测点击了什么按钮

.post() 带一个函数在提交完成后执行

【讨论】：

此问题未使用 jQuery 标记。
@DZittersteyn 通常认为提供依赖于未要求的库的解决方案是不合适的。您没有说错，但如果我们不遵守该约定，答案将是“INSTALL JQUERY PORBLEM SOLVED”的令人讨厌的重复合唱。
It's well-known jQuery solves everything.
@j08691 对于实际问题我很想得到一个实际的解决方案。如果有人要求使用 jQuery 很容易解决的问题（看起来好像 OP 试图在 JS 中实现 AJAX），我会尝试给他们答案，这样可以节省大量工作。正如我在回复 Pointy 时所说，下次我会尽量记住标签，并不是要破坏一般的适当性。
我必须同意@DZittersteyn。假设我是 OP，我来到这里，除了有人推荐 jQuery 方法的回答外，没有一个解决方案有效，或者没有我想要的效果。即使 if 我不能或不会使用 jQuery，至少该人的回答可以为我指明正确的方向。例如，那时我可能会下载 jQuery，查看源代码以了解它是如何完成的，然后在我自己的代码中执行相同的操作。在我看来，这里没有错误的答案，只要它至少与原始问题有一定的密切关系。

【解决方案5】：

您可以延迟操作的执行，以便仅在提交完成后调用它们：

$('#myForm').submit(function() {
    setTimeout(function() {
        // Run disabling code here
    }, 1);
    return true;
}

setTimeout(fn, 1) 会将里面的函数放在执行队列的末尾，这样在函数运行之前就已经开始提交表单了。

setTimeout 可用于队列操作，有点像线程索引或 z-index：

【讨论】：