182

我有一个使用 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 中也不起作用！（都没有任何消息）

4

18 回答 18

200

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

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

于 2017-02-07T04:39:33.820 回答
89

如果您在尝试按 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

于 2017-12-16T18:00:21.757 回答
20

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

于 2019-01-25T12:04:56.380 回答
18

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

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

于 2017-06-13T14:29:54.123 回答
11

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

于 2017-02-06T03:20:13.313 回答
9

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

当我尝试@KyungHun Jeon 的答案时，使用 jQuery 对我来说也不起作用。

因此，我尝试使用 jQuery 方式将表单附加到正文：

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

它奏效了！

于 2017-02-10T02:40:56.493 回答
6

如果您在 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>
于 2018-10-18T16:26:22.820 回答
3

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

问题是，

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

因此，在单击按钮时，onclick 函数正在触发并且表单未提交，并且控制台正在打印 -

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

简单的解决方法是：

  • 在表单上使用 onSubmit 处理程序
  • 从按钮本身中删除 onClick 处理程序，保留类型“提交”
于 2021-01-29T02:10:41.960 回答
2

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

于 2020-06-23T09:42:08.400 回答
2 
<button type="button">my button</button>

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

于 2020-09-01T07:03:04.907 回答
2

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

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

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

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

它奏效了。谢谢。

于 2017-03-17T07:56:07.180 回答
1

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

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

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

于 2019-01-05T15:47:56.023 回答
1

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

于 2019-10-04T20:48:28.077 回答
1

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

于 2017-02-09T12:35:14.067 回答
1

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;
于 2021-06-16T19:53:59.723 回答
0

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

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

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

于 2018-02-07T18:06:23.897 回答
0

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

没有<body>, whendocument.body.appendChild(form);语句没有要附加的主体对象。

于 2020-07-23T16:02:01.380 回答
-1

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

于 2017-03-03T01:55:44.633 回答