获取错误“表单提交已取消，因为表单未连接”

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

260351 次浏览
小开

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

小开
最佳答案

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

document.body.appendChild(form);

或者，如果您像上面那样使用jQuery

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

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

HTML规范见4.10.2 1.3.2

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

Chrome代码差异参见@@-347，9+347，16@@

附注：关于你的问题#1。在我看来，与Ajax不同，表单提交会导致即时页面移动。
因此，显示“已弃用的警告消息”几乎是不可能的。
我也认为这个严重的变化不包括在功能变化列表中是不可接受的。Chrome 56功能-www.chromestatus.com/功能#里程碑%3D56

小开

这取决于Kyunghun Jeon的回答，但appendChild需要一个DOM节点，因此向jQuery对象添加一个索引以返回该节点： document.body.appendChild(form[0])

小开

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

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

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

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

而且成功了！

小开

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

小开

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

我们使用的是jquery.forms.JS.这是一个表单插件，可以在这里找到。http://malsup.com/jquery/form/

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

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

而且起作用了谢谢。

小开

或者包括 事件.preventDefault（）； 在你的 句柄提交（事件）{

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

小开

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

如果只有一个button，_为ABC_1，则按Enter将按预期提交表单。

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

小开

您也可以通过在jQuery-X.X.X.JS中应用单个补丁来解决这个问题，只需在try{RP；}CATCH（M）{}第1833行此代码：

if（R）HTMLFormElement的实例&；&；！R.ParentNode）{ R.style.display=“无”；document.body.append（R）； R[P]（）； }

当窗体不是主体的一部分并添加它时，这将进行验证。

小开

如果您在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>
小开

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

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

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

小开

将属性类型=“按钮”添加到按钮上，点击你看到的错误，它为我工作。

小开

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

小开

我可以通过添加属性type="；按钮"；来删除该消息。到Vue中的按钮元素。

小开

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

没有<body>，当_ABC时_1语句没有要追加的正文对象。

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

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

小开

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

问题是，

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

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

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

简单的解决办法是：

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

作为Mike Ruhlin回答的示例，我在表单提交时使用react-router-domRedirect进行了重定向。

将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;
小开

如果使用React和类似Formik的东西，问题似乎出在提交按钮中的onclick处理程序中。

小开
  1. 你的按钮必须在表单标签的上下文中。
  2. 按钮type="submit"
  3. 我也遇到了同样的问题，我从按钮标签中删除了onClick={onSubmit}（我在这里使用了FormIK）。

提交答案