Javascript 出现错误“表单提交被取消，因为表单未连接”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42053775/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting Error "Form submission canceled because the form is not connected"
提问by Mahmoud Moravej
I have an old website with JQuery 1.7 which works correctly till two days ago. Suddenly some of my buttons do not work anymore and, after clicking on them, I get this warning in the console:
我有一个使用 JQuery 1.7 的旧网站，它可以正常工作到两天前。突然，我的一些按钮不再起作用，单击它们后，我在控制台中收到此警告：
Form submission canceled because the form is not connected
表单提交取消，因为表单未连接
The code behind the click is something like this:
点击背后的代码是这样的：
this.handleExcelExporter = function(href, cols) {
var form = $('<form method="post"><input type="submit" /><input type="hidden" name="layout" /></form>').attr('action', href);
$('input[name="layout"]', form).val(JSON.stringify(cols));
$('input[type="submit"]', form).click();
}
It seems that Chrome 56 doesn't support this kind of code anymore. Isn't it? If yes my question is:
Chrome 56 似乎不再支持这种代码了。不是吗？如果是，我的问题是：
- Why did this happened suddenly? Without any deprecation warning?
- What is the workaround for this code?
- Is there a way to force chrome (or other browsers) to work like before without changing any code?
- 为什么会突然出现这种情况？没有任何弃用警告？
- 此代码的解决方法是什么？
- 有没有办法强制 chrome（或其他浏览器）像以前一样工作而无需更改任何代码？
P.S.It doesn't work in the latest firefox version either (without any message). Also it does not work in IE 11.0 & Edge! (both without any message)
PS它也不适用于最新的 Firefox 版本（没有任何消息）。它也不适用于 IE 11.0 和 Edge！（都没有任何消息）
回答by KyungHun Jeon
Quick answer : append the form to the body.
快速回答：将表单附加到正文中。
document.body.appendChild(form);
document.body.appendChild(form);
Or, if you're using jQuery as above: $(document.body).append(form);
或者，如果您像上面一样使用 jQuery： $(document.body).append(form);
Details : According to the HTML standards, if the form is not associated to the browsing context(document), the form submission will be aborted.
详细信息：根据 HTML 标准，如果表单未与浏览上下文（文档）相关联，则表单提交将被中止。
HTML SPECsee 4.10.21.3.2
HTML规范见 4.10.21.3.2
In Chrome 56, this spec was applied.
在 Chrome 56 中，应用了此规范。
Chrome code diffsee @@ -347,9 +347,16 @@
Chrome 代码差异见@@ -347,9 +347,16 @@
P.S about your question #1. In my opinion, unlike ajax, form submission causes instant page move.
So, showing 'deprecated warning message' is almost impossible.
I also think it's unacceptable that this serious change is not included in the feature change list. Chrome 56 features - www.chromestatus.com/features#milestone%3D56
PS关于你的问题#1。在我看来，与 ajax 不同，表单提交会导致页面即时移动。
因此，显示“已弃用的警告消息”几乎是不可能的。
我也认为这个严重的变化没有包含在功能更改列表中是不可接受的。Chrome 56 功能 - www.chromestatus.com/features#milestone%3D56
回答by vaskort
if you are seeing this error in React JS when you try to submit the form by pressing enter, make sure all your buttons in the form that do not submit the form have a type="button".
如果您在尝试按 Enter 提交表单时在 React JS 中看到此错误，请确保表单中所有未提交表单的按钮都带有type="button".
If you have only one buttonwith type="submit"pressing Enter will submit the form as expected.
如果你只有一个button与type="submit"按Enter键将提交表单预期。
References:
https://dzello.com/blog/2017/02/19/demystifying-enter-key-submission-for-react-forms/https://github.com/facebook/react/issues/2093
参考资料：
https: //dzello.com/blog/2017/02/19/demystifying-enter-key-submission-for-react-forms/ https://github.com/facebook/react/issues/2093
回答by Tayyab Mehar
add attribute type="button"to the button on who's click you see the error, it worked for me.
将属性type="button"添加到谁点击的按钮上，您会看到错误，它对我有用。
回答by Liu Tao
You must ensure that the form is in the document. You can append the form to the body.
您必须确保该表格在文件中。您可以将表单附加到正文。
回答by joncode
alternatively include event.preventDefault(); in your handleSubmit(event) {
或者包括 event.preventDefault(); 在你的 handleSubmit(event) {
回答by Rizki Pratama
I see you are using jQuery for the form initialization.
我看到您正在使用 jQuery 进行表单初始化。
When I try @KyungHun Jeon's answer, it doesn't work for me that use jQuery too.
当我尝试@KyungHun Jeon 的回答时，它也不适用于使用 jQuery 的我。
So, I tried appending the form to the body by using the jQuery way:
因此，我尝试使用 jQuery 方式将表单附加到正文：
$(document.body).append(form);
And it worked!
它奏效了！
回答by Mike Ruhlin
A thing to look out for if you see this in React, is that the <form>still has to render in the DOM while it's submitting. i.e, this will fail
如果你在 React 中看到这个，需要注意的一点是，<form>它在提交时仍然必须在 DOM 中呈现。即，这将失败
{ this.state.submitting ?
<div>Form is being submitted</div> :
<form onSubmit={()=>this.setState({submitting: true}) ...>
<button ...>
</form>
}
So when the form is submitted, state.submittinggets set and the "submitting..." message renders instead of the form, then this error happens.
因此，当提交表单时，state.submitting设置并呈现“正在提交...”消息而不是表单，然后会发生此错误。
Moving the form tag outside the conditional ensured that it was always there when needed, i.e.
将表单标签移到条件之外确保它在需要时总是在那里，即
<form onSubmit={...} ...>
{ this.state.submitting ?
<div>Form is being submitted</div> :
<button ...>
}
</form>
回答by Abhinav Chawla
I faced the same issue in one of our implementation.
我在我们的一个实现中遇到了同样的问题。
we were using jquery.forms.js. which is a forms plugin and available here. http://malsup.com/jquery/form/
我们使用的是 jquery.forms.js。这是一个表单插件，可在此处获得。http://malsup.com/jquery/form/
we used the same answer provided above and pasted
我们使用了上面提供的相同答案并粘贴了
$(document.body).append(form);
and it worked.Thanks.
它奏效了。谢谢。
回答by moti irom
Depending on the answer from KyungHun Jeon, but the appendChild expect a dom node, so add a index to jquery object to return the node:
document.body.appendChild(form[0])
根据 KyungHun Jeon 的回答，但是 appendChild 需要一个 dom 节点，因此向 jquery 对象添加索引以返回节点：
document.body.appendChild(form[0])
回答by Matt H
Adding for posterity since this isn't chrome related but this was the first thread that showed up on google when searching for this form submission error.
为后代添加，因为这与 chrome 无关，但这是搜索此表单提交错误时出现在 google 上的第一个线程。
In our case we attached a function to replace the current div html with a "loading" animation on submission - since it occurred before the form was submitted there was no longer any form or data to submit.
在我们的例子中，我们附加了一个函数来在提交时用“加载”动画替换当前的 div html - 因为它发生在表单提交之前，所以不再需要提交任何表单或数据。
Very obvious error in retrospect but in case anyone ends up here it might save them some time in the future.
回想起来非常明显的错误，但如果有人最终来到这里，这可能会为他们节省一些时间。
