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

【问题标题】：Getting Error "Form submission canceled because the form is not connected"出现错误“由于表单未连接而取消表单提交”
【发布时间】：2017-06-22 13:37:40
【问题描述】：

我有一个使用 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 似乎不再支持这种代码了。不是吗？如果是，我的问题是：

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

附言它在最新的 Firefox 版本中也不起作用（没有任何消息）。它在 IE 11.0 和 Edge 中也不起作用！（都没有任何消息）

【问题讨论】：

我在接受的答案中添加了一个修复，以匹配表单是 jQuery 对象的事实。请注意，这也会影响 jQuery .submit() 处理程序（除了上面指出的 .click() 方法）。

标签： javascript jquery google-chrome jquery-1.7

【解决方案1】：

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

document.body.appendChild(form);

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

详情：根据 HTML 标准，如果表单没有关联到浏览上下文（文档），表单提交将被中止。

HTML SPEC 见 4.10.21.3.2

在 Chrome 56 中应用了此规范。

Chrome code diff 见@@ -347,9 +347,16 @@

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

【讨论】：

刚刚有一些用户报告了这个错误。另外，有些用户没有升级版本，所以他们可以毫无问题地提交表单。使错误更加不一致。感谢您的回答！
所提出的解决方案在结合使用 jQuery 时对我不起作用，就像在原始问题中一样。这有效：$(document.body).append(form);
@Chris 我刚刚编辑了接受的答案，因为表单变量是一个 jQuery 对象，而不是实际的 DOM 表单元素。因为它使用form[0]，它会产生一个错误“无法在'Node'上执行'appendChild'：参数1不是'Node'类型。”在铬。因此，只需更改为document.body.appendChild(form[0])。
@ryanm，我只是一名编辑，因为我贡献了以下行 $(document.body).append(form);。欢迎您通过编辑或询问@KyungHun Jeon 是否愿意采用您的解决方案而不是他的解决方案，将您的解决方案添加到已接受的答案中。
@Chris 谢谢！我想既然问题是在 jQuery 中，答案也应该是（可能会令人困惑），但我的编辑看起来被拒绝了。然后给其他路人一个注释，它可以是document.body.appendChild(form[0])（稍微快一点）或$(document.body).append(form)。

【解决方案2】：

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

【解决方案3】：

或者包括 event.preventDefault(); 在你的处理提交（事件）{

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

【讨论】：

鼓励链接到外部资源，但请在链接周围添加上下文，以便您的其他用户了解它是什么以及为什么存在。始终引用重要链接中最相关的部分，以防目标站点无法访问或永久离线。见how to write a good answer
使用àntd 表单。这有帮助。

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：

我有这个，结果发现远程表单提交按钮添加了一个 onclick，它删除了表单的包含元素。所以在提交的表单和被删除的表单之间基本上存在竞争条件。
感谢@Max Williams，您的评论让我重回正轨，而不是接受的答案。

【解决方案6】：

我看到您正在使用 jQuery 进行表单初始化。

当我尝试@KyungHun Jeon 的回答时，我也无法使用 jQuery。

所以，我尝试使用 jQuery 的方式将表单附加到正文：

$(document.body).append(form);

它成功了！

【讨论】：

如果你找不到表格试试这个 $(document.body).append($('form'));

【解决方案7】：

如果您在 React 中看到这一点，需要注意的是，<form> 在提交时仍然必须在 DOM 中呈现。即，这将失败

{ this.state.submitting ? 
     <div>Form is being submitted</div> :
     <form onSubmit={()=>this.setState({submitting: true}) ...>
         <button ...>
     </form>
}

所以当表单被提交时，state.submitting 被设置并且“正在提交...”消息而不是表单呈现，然后这个错误就会发生。

将表单标签移到条件之外确保它在需要时始终存在，即

<form onSubmit={...} ...>
  { this.state.submitting ? 
     <div>Form is being submitted</div> :
     <button ...>
  }
</form>

【讨论】：

比赛条件！

【解决方案8】：

我在我的 React 项目中发现了这个问题。

问题是，

我已将按钮类型设置为“提交”
我在按钮上设置了一个 onClick 处理程序

所以，当点击按钮时，onclick 函数被触发并且表单没有提交，并且控制台正在打印 -

表单提交因表单未连接而取消

简单的解决方法是：

在表单上使用 onSubmit 处理程序
从按钮本身中删除 onClick 处理程序，保留类型“提交”

【讨论】：

【解决方案9】：

我在我们的一个实施中遇到了同样的问题。

我们使用的是 jquery.forms.js。这是一个表单插件，可在此处获得。 http://malsup.com/jquery/form/

我们使用了上面提供的相同答案并粘贴了

$(document.body).append(form);

它成功了。谢谢。

【讨论】：

【解决方案10】：

取决于 KyungHun Jeon 的回答，但 appendChild 期望一个 dom 节点，因此向 jquery 对象添加一个索引以返回该节点： document.body.appendChild(form[0])

【讨论】：

你的意思是document.body.appendChild(form[0])？

【解决方案11】：

为后代添加，因为这与 chrome 无关，但这是在搜索此表单提交错误时出现在 google 上的第一个线程。

在我们的例子中，我们附加了一个函数，在提交时用“加载”动画替换当前的 div html - 因为它发生在表单提交之前，因此不再需要提交任何表单或数据。

回想起来非常明显的错误，但如果有人最终来到这里，它可能会在未来为他们节省一些时间。

【讨论】：

【解决方案12】：

我在 react.js 中收到了这个错误。如果您在表单中有一个按钮，您想像按钮一样操作而不提交表单，您必须给它 type="button"。否则它会尝试提交表单。我相信 vaskort 用一些你可以查看的文档来回答这个问题。

【讨论】：

这是一个警告：表单提交被取消，因为表单没有连接。很抱歉忘记添加。
我可以确认这一点。每当我按下表单的“取消”按钮时，我都会在 React 中收到相同的警告 Form submission canceled because the form is not connected。将type="button" 添加到我的“取消”按钮后，我不再收到警告。谢谢！

【解决方案13】：

我可以通过在 vue 中为按钮元素添加属性 type="button" 来摆脱消息。

【讨论】：

【解决方案14】：

<button type="button">my button</button>

我们必须在我们的按钮元素中添加上面的属性

【讨论】：

【解决方案15】：

Mike Ruhlin 的回答示例，我在提交表单时使用 react-router-dom Redirect 重定向。

将 e.preventDefault() 放入我的提交函数中删除了我的警告

const Form = () => {

    const [submitted, setSubmitted] = useState(false);
    const submit = e => {
      e.preventDefault();
      setSubmitted(true);
    }

    if (submitted) {
        return <Redirect push to={links.redirectUrl} />
    };

    return (
          <form onSubmit={e => submit(e)}>
          ...
          </form>

    );
};

export default Form;

【讨论】：

【解决方案16】：

您也可以通过在 jquery-x.x.x.js 中应用单个补丁来解决它，只需在“try { rp;} catch (m) {}”行 1833 之后添加此代码：

if (r instanceof HTMLFormElement &&! r.parentNode) { r.style.display = "none"; document.body.append (r); r [p] (); }

这会验证表单不是正文的一部分并添加它。

【讨论】：

【解决方案17】：

我注意到我收到了这个错误，因为我的 HTML 代码没有<body> 标签。

没有<body>，当document.body.appendChild(form); 语句没有要附加的主体对象时。

【讨论】：

【解决方案18】：

我使用 angular 看到了这条消息，所以我只是把 method="post" 和 action="" 拿出来，警告就消失了。

【讨论】：