获取错误"表单提交已取消,因为表单未连接"

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似乎不再支持这种代码了.不是吗？如果是,我的问题是:

1. 为什么这突然发生了？没有任何弃用警告？
2. 此代码的解决方法是什么？
3. 有没有办法强制chrome(或其他浏览器)像以前一样工作而不更改任何代码？

PS 它在最新的firefox版本中也不起作用(没有任何消息).它也无法在IE 11.0和Edge中运行!(两者都没有任何消息)

Answer 1

快速回答:将表格附加到身体上.

document.body.appendChild(form);

或者,如果您使用上面的jQuery: $(document.body).append(form);

详细信息:根据HTML标准,如果表单未与浏览上下文(文档)关联,则表单提交将中止.

HTML SPEC见4.10.21.3.2

在Chrome 56中,应用了此规范.

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

PS关于你的问题#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

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

问题是，

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

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

由于表单未连接，表单提交被取消

简单的修复方法是：

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

Answer 4

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

Answer 5

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

当我尝试@KyungHun Jeon的回答时,它对我来说也不适用于使用jQuery.

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

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

它奏效了!

Answer 6

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

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

Answer 7

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

Answer 8

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

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

Answer 9

如果您在React中看到这一点，需要注意的是，<form>仍然需要在DOM提交时在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>