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

我有一个使用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();
 }

this.handleExcelExporter=函数（href，cols）{
var form=$（''）.attr（'action'，href）；
$（'input[name=“layout”]”，form.val（JSON.stringify（cols））；
$（'input[type=“submit”]”，表单）。单击（）；
}

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

为什么会突然发生这种情况？没有任何反对警告

此代码的解决方法是什么

有没有办法强迫chrome（或其他浏览器）像以前一样工作而不改变任何代码 p.S.

---

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

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

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

document.body.appendChild（表单）

或者，如果您如上所述使用jQuery：
$（document.body）.append（form）

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

见4.10.21.3.2

在Chrome 56中，应用了此规范

参见@--347,9+347,16@@

关于你的问题#1。在我看来，与ajax不同，表单提交会导致页面即时移动。

因此，显示“不推荐的警告消息”几乎是不可能的。

我也认为这一严重的变化没有包括在特性变化列表中是不可接受的。Chrome 56的功能-
取决于KyungHun-Jeon的回答，但是appendChild需要一个dom节点，因此向jquery对象添加一个索引以返回节点：
document.body.appendChild（表单[0]）
我看到您正在使用jQuery进行表单初始化

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

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

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

成功了
 我用angular看到了这条消息，所以我只取出了method=“post”和action=”“，警告就消失了。
我在我们的一个实现中遇到了同样的问题

我们使用的是jquery.forms.js。这是一个表单插件，可在此处使用

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

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

它成功了。谢谢。
或者包括
event.preventDefault（）；
在你的
handleSubmit（事件）{

请参阅
如果您在尝试按enter键提交表单时在React JS中看到此错误，请确保表单中所有未提交表单的按钮都有一个
type=“button”

如果您只有一个带有
type=“submit”
的
按钮，则按Enter键将按预期提交表单

参考文献：

您也可以通过在jquery-x.x.x.js中应用一个补丁来解决这个问题，只需在“try{rp；}catch（m）{}”行1833之后添加以下代码：

if（HTMLFormElement&&！r.parentNode的r实例）{
r、 style.display=“none”document.body.append（r）；
r[p]（）；
}

当表单不是主体的一部分并添加它时，这将进行验证。
如果在React中看到这一点，需要注意的是，
在提交时仍必须在DOM中呈现。也就是说，这将失败

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

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

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

retrospect中存在非常明显的错误，但万一有人出现在此处，这可能会在将来为他们节省一些时间。
添加属性type=“button”点击“谁的”按钮，你会看到错误，它对我有效。
我在react.js中收到此错误。如果表单中有一个按钮，你想像按钮一样操作，而不提交表单，你必须给它type=“button”。否则它会尝试提交表单。我相信vaskort回答了这个问题，并提供了一些您可以查看的文档。
我可以通过在vue中向button元素添加属性type=“button”来删除此消息。
我注意到我遇到了此错误，因为我的HTML代码没有
标记

如果没有
，当
document.body.appendChild（form）；
语句没有要追加的body对象时。
我的按钮
<button type="button">my button</button>


我们必须在按钮元素中添加上面的属性
我在React项目中发现了这个问题

问题是,


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

因此，在单击按钮时，onclick函数正在启动，表单没有提交，控制台正在打印-

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

简单的解决方法是：


在表单上使用onSubmit处理程序
从按钮本身移除onClick处理程序，保留类型“Submit”
作为Mike Ruhlin回答的一个例子，我在表单提交时使用
react router dom
重定向

将e.preventDefault（）放入我的submit函数中可以消除对我的警告

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;

const Form=（）=>{
const[submited，setSubmitted]=使用状态（false）；
const submit=e=>{
e、 预防默认值（）；
setSubmitted（true）；
}
如果
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;