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

How can I run some JavaScript *after* a form submit event?

提问by Paul D. Waite

I'm working on an HTML form that may take a few seconds to submit. I'd like to disable some of the fields in the form afterit's submitted.

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

I can do this in a handler on the form's submitevent, but this fires beforethe form submits. If I disable the controls then, their values aren't included in the post data sent to the server.

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

I've tried cancelling the submit event in my handler, removing my submitevent handler from the form, submitting the form myself via JavaScript, and thendisabling the controls, but the problem there is that I need to know which button the user clicked on to submit the form. This information is in the original form submit, but obviously isn't in the one I trigger manually (as no button was clicked).

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

I could try to copy this information into my manual form submit, but is there a way to run my disabling code after the form submits?

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

回答by Kev

Don't allow further submits by disabling the submit buttons, you don't need to do anything else. Alternatively, hide the form and replace it with something that spins so users are mesmerized into thinking that Something Important is happening.

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

回答by Basith

After submiting the form you can trigger this function:

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

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

This code will disable all the from fields descended from the element with "target" as its id.

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

This version just matches all input elements:

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

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

You have to include the jQuery library for this code to work.

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

回答by Scuba Kay

This is pretty much the same as sp00m's answer, except it uses Javascripts native submit to prevent the recursive call.

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

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

回答by DZittersteyn

You could use jQuery's .post()to submit, and .button().click()to detect what button was clicked

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

.post()takes a function to execute afterthe submission is complete

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

回答by lofihelsinki

You could delay the execution of your operations so that they are called only after the submit has been made:

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

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

setTimeout(fn, 1)will place the function inside at the end of the execution queue, so that the form submission has been started before the functions run.

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

setTimeoutcan be used for queuing operations a bit like thread indexing or z-index:

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

StackOverflow: Why is setTimeout(fn, 0) sometimes useful?

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