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

Question

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

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

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

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

Answer 1

不要通过禁用提交按钮来允许进一步提交，您不需要做任何其他事情。 或者，隐藏表单并用旋转的东西替换它，这样用户就会着迷于认为发生了一些重要的事情。

Answer 2

提交表单后，您可以触发此功能：

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

此代码将禁用所有从以“目标”作为其 id 的元素的后代字段。

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

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

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

Answer 3

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

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

Answer 4

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

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

Answer 5

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

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

setTimeout(fn, 1)会将函数放在执行队列的末尾，以便在函数运行之前开始表单提交。

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

StackOverflow：为什么 setTimeout(fn, 0) 有时有用？