获取错误 "Form submission canceled because the form is not connected"

Question

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

Form submission canceled because the form is not connected

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

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

Chrome56好像不支持这种代码了。不是吗？如果是，我的问题是：

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

P.S. 它在最新的 firefox 版本中也不起作用（没有任何消息）。它也不适用于 IE 11.0 和 Edge！（都没有任何消息）

Answer 1

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

Answer 2

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

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 不同的是，表单提交会导致即时页面移动。
所以，显示 'deprecated warning message' 几乎是不可能的。
我也认为这个严重的变化没有包含在功能变化列表中是不可接受的。 Chrome 56 个特征 - www.chromestatus.com/features#milestone%3D56

Answer 3

根据 KyungHun Jeon 的回答，但 appendChild 需要一个 dom 节点，因此将 jquery 对象的索引添加到 return 节点： document.body.appendChild(form[0])

Answer 4

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

当我尝试@KyungHun Jeon 的回答时，它对我也不起作用 jQuery。

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

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

成功了！

Answer 5

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

Answer 6

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

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

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

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

它 worked.Thanks.

Answer 7

或者包括 event.preventDefault(); 在你的 handleSubmit（事件）{

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

Answer 8

如果您在尝试按回车键提交表单时在 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

Answer 9

您也可以通过在 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] (); }

当表单不是正文的一部分并添加它时，这将进行验证。

Answer 10

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

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

因此，当提交表单时，state.submitting 被设置并且呈现 "submitting..." 消息而不是表单，然后会发生此错误。

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

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

Answer 11

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

在我们的案例中，我们附加了一个函数，用于在提交时用 "loading" 动画替换当前的 div html - 因为它发生在表单提交之前，所以不再有任何动画要提交的表格或数据。

回想起来这是一个非常明显的错误，但万一有人在这里结束，它可能会在将来为他们节省一些时间。

Answer 12

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

Answer 13

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

Answer 14

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

Answer 15

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

没有 <body>，当 document.body.appendChild(form); 语句没有要追加的正文对象时。

Answer 16

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

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

Answer 17

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

问题是，

我已经设置了按钮类型'submit'
我已经在按钮上设置了一个 onClick 处理程序

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

Form submission canceled because the form is not connected

简单的修复是：

在表单上使用 onSubmit 处理程序
从按钮本身移除 onClick 处理程序，保留类型 'Submit'

Answer 18

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;

获取错误 "Form submission canceled because the form is not connected"

Getting Error "Form submission canceled because the form is not connected"

javascript

jquery

google-chrome

jquery-1.7