Question

我有一个使用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（或其他浏览器）像以前一样工作而不更改任何代码？

P.S。 它也没有在最新的firefox版本中工作（没有任何消息）。它也不适用于IE 11.0＆amp;边缘！（两者都没有任何消息）

Answer 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

Answer 2

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

如果您只有button type="submit"按{Enter}，则会按预期提交表单。

<强>参考：
https://dzello.com/blog/2017/02/19/demystifying-enter-key-submission-react-forms-multiple-buttons/ https://github.com/facebook/react/issues/2093

Answer 3

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

Answer 4

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

当我尝试@KyungHun Jeon的回答时，它对我来说也不适合使用jQuery。

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

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

它有效！

Answer 5

或者包括 event.preventDefault（）; 在你的 handleSubmit（event）{

请参阅https://facebook.github.io/react/docs/forms.html

Answer 6

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

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

因此，在提交表单时，设置state.submitting并呈现“ submitting ...”（而不是表单）消息，那么就会发生此错误。

将form标记移至条件标记之外可确保在需要时即始终存在该标记，即

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

Answer 7

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

Answer 8

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

问题是，

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

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

<块引用>

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

简单的解决方法是：

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

Answer 9

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

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

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

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

并且它奏效了。谢谢。

Answer 10

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

Answer 11

我在react.js中收到此错误。如果您要在表单中使用某个按钮，但不想提交该表单，则必须将其设为type =“ button”。否则，它将尝试提交表单。我相信vaskort会通过一些您可以查看的文档来回答这个问题。

Answer 12

通过将属性type =“ button”添加到vue中的button元素，我摆脱了消息。

Answer 13

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

我们必须在按钮元素上方添加属性

Answer 14

您也可以通过在jquery-x.x.x.js中应用单个补丁来解决它，只需在＆＃34;之后添加。试试{rp; } catch（m）{}＆＃34;第1833行代码：

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

Answer 15

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

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

回顾起来非常明显的错误，但是如果有人最终出现在这里，可能会在将来节省一些时间。

Answer 16

我注意到我收到此错误，因为我的HTML代码没有<body>标记。

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

Answer 17

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;

Answer 18

我使用angular看到了这条消息，所以我只使用method =“post”和action =“”out，警告就消失了。

获取错误＆＃34;表单提交已取消，因为表单未连接＆＃34;

18 个答案: