获取错误“表单提交因表单未连接而取消”

我有一个带有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(或其他浏览器)像以前一样工作而不更改任何代码?

附言它也不适用于最新的firefox版本(没有任何消息)。此外,它在IE 11.0和Edge中也不起作用!(两者都没有任何消息)


答案 1

快速回答:将表格附加到身体上。

document.body.appendChild(form);

或者,如果您使用jQuery,如上所述:$(document.body).append(form);

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

HTML 规范请参阅 4.10.21.3.2

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

Chrome 代码差异请参阅 @@ -347,9 +347,16@@

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


答案 2

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

如果您只有一个按 Enter 键将按预期提交表单。buttontype="submit"

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