出现错误“由于表单未连接而取消表单提交”

IT技术 javascript jquery google-chrome jquery-1.7
2021-01-31 01:30:02

我有一个使用 JQuery 1.7 的旧网站，它可以正常工作到两天前。突然，我的一些按钮不再起作用，单击它们后，我在控制台中收到此警告：

表单提交取消，因为表单未连接

点击背后的代码是这样的：

 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();
 }

Chrome 56 似乎不再支持这种代码了。不是吗？如果是，我的问题是：

  1. 为什么会突然出现这种情况？没有任何弃用警告？
  2. 此代码的解决方法是什么？
  3. 有没有办法在不更改任何代码的情况下强制 chrome（或其他浏览器）像以前一样工作？

PS 它也不适用于最新的 Firefox 版本（没有任何消息）。它也不适用于 IE 11.0 和 Edge！（都没有任何消息）

6个回答

快速回答：将表单附加到正文中。

document.body.appendChild(form);

或者，如果您像上面一样使用 jQuery： $(document.body).append(form);

详细信息：根据 HTML 标准，如果表单未与浏览上下文（文档）相关联，则表单提交将被中止。

HTML规范见 4.10.21.3.2

在 Chrome 56 中，应用了此规范。

Chrome 代码差异见@@ -347,9 +347,16 @@

PS关于你的问题#1。在我看来，与 ajax 不同的是，表单提交会导致页面即时移动。
因此，显示“已弃用的警告消息”几乎是不可能的。
我也认为这个严重的变化没有包含在功能更改列表中是不可接受的。Chrome 56 功能 - www.chromestatus.com/features#milestone%3D56

@ryanm，我只是一名编辑，因为我贡献了以下行$(document.body).append(form);。欢迎您通过编辑或询问@KyungHun Jeon 是否希望采用您的解决方案而不是他的解决方案，将您的解决方案添加到已接受的答案中。
2021-03-14 01:30:02
@克里斯谢谢！我想既然问题是在 jQuery 中，答案也应该是（可能会令人困惑），但我的编辑看起来像是被拒绝了。对于其他路过的人，请注意它可以是document.body.appendChild(form[0])（稍微快一点） OR $(document.body).append(form)。
2021-03-15 01:30:02
与原始问题一样，建议的解决方案与 jQuery 的使用结合起来对我不起作用。这反而起作用了： $(document.body).append(form);
2021-03-17 01:30:02
刚刚有一些用户报告了这个错误。此外，其他一些用户没有升级版本，因此他们可以毫无问题地提交表单。使错误更加不一致。感谢您的回答！
2021-03-19 01:30:02
@Chris 我刚刚编辑了接受的答案，因为表单变量是一个 jQuery 对象，而不是实际的 DOM 表单元素。在使用 时form[0]，它会产生错误“无法在‘节点’上执行‘appendChild’：参数 1 的类型不是‘节点’。” 在 Chrome 中。因此，只需更改为document.body.appendChild(form[0])。
2021-04-09 01:30:02

如果您在尝试按 Enter 提交表单时在 React JS 中看到此错误，请确保表单中所有未提交表单的按钮都带有type="button".

如果你只有一个button与type="submit"按Enter键将提交表单预期。

参考资料：
https : //dzello.com/blog/2017/02/19/demystifying-enter-key-submission-for-react-forms/ https://github.com/facebook/react/issues/2093

在 React 中也是一个需要注意的事情，<form>点击后仍然必须在 DOM 中呈现。即，这将失败` { this.state.submitting ? <div>表单正在提交</div> : <form onSubmit={()=>this.setState({submitting: true}) ...> <button ...> </form> } ` 所以当表单被提交，state.submitting被设置并且“正在提交......”消息呈现而不是表单，然后发生此错误。将表单标签移到条件之外可确保它在需要时始终存在。
2021-03-14 01:30:02
很高兴知道。我想您不必将整个form元素更改为div. 我相信，如果您只是更改 的内容form而不是替换元素，它将按预期工作。
2021-03-28 01:30:02
preventDefault() 导致 Chrome 发出此警报
2021-03-31 01:30:02
非常感谢！我一直在尝试在 axios.post 请求之后加载一个新页面，单击按钮只会在请求发生之前刷新页面！
2021-04-07 01:30:02
所以，就像 Max Williams 所说的，这是一个竞争条件——浏览器正在检查表单是否存在，但表单已经消失了。
2021-04-08 01:30:02

或者包括 event.preventDefault(); 在你的 handleSubmit(event) {

见https://facebook.github.io/react/docs/forms.html

鼓励链接到外部资源，但请在链接周围添加上下文，以便您的其他用户了解它是什么以及它为什么在那里。始终引用重要链接中最相关的部分，以防目标站点无法访问或永久离线。看看如何写出好的答案
2021-04-01 01:30:02
使用àntd表格。这有帮助。
2021-04-04 01:30:02

将属性type="button"添加到谁点击的按钮上，您会看到错误，它对我有用。

您必须确保该表格在文件中。您可以将表单附加到正文。

我有这个，结果发现远程表单提交按钮添加了一个 onclick，它删除了表单的包含元素。所以在提交的表单和被删除的表单之间基本上存在竞争条件。
2021-03-16 01:30:02
谢谢@Max Williams，您的评论比公认的答案更让我重回正轨。
2021-03-28 01:30:02
其它你可能感兴趣的问题
上一篇AngularJS 指令之间的通信 下一篇类型错误：$ 不是 WordPress 函数