我有一个使用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(或其他浏览器)正常工作?
PS
在最新的firefox版本中也不起作用(没有任何消息)。另外,它在IE 11.0和Edge中也不起作用!(都没有任何消息)
快速解答:将表格附加到正文中。
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
如果您在尝试按Enter提交表单时在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
或者包括event.preventDefault(); 在您的handleSubmit(event){
参见https://facebook.github.io/react/docs/forms.html
将属性type =“ button”添加到单击谁的按钮上,您会看到此错误,它对我有用。
您必须确保该表单在文档中。您可以将表单附加到正文。
我看到您正在使用jQuery进行表单初始化。
当我尝试@KyungHun Jeon的答案时,使用jQuery也不适合我。
因此,我尝试使用jQuery方式将表单追加到正文中:
$(document.body).append(form);
而且有效!
如果您在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>
在我们的一项实现中,我遇到了同样的问题。
我们正在使用jquery.forms.js。这是一个表单插件,可在此处获得。http://malsup.com/jquery/form/
我们使用上面提供的相同答案并粘贴
$(document.body).append(form);
并且成功了。谢谢。
根据KyungHun Jeon的回答,但是appendChild需要一个dom节点,因此请向jquery对象添加索引以返回该节点:
document.body.appendChild(form[0])
添加后代,因为这与Chrome无关,但这是搜索此表单提交错误时在Google上显示的第一个线程。
在我们的案例中,我们附加了一个函数,用于在提交时用“加载”动画替换当前的div html-因为它发生在提交表单之前,所以不再有任何表单或数据可以提交。
回想起来很明显的错误,但是万一有人落在这里,将来可能会节省一些时间。
我在react.js中收到此错误。如果表单中有一个按钮,您想像按钮一样操作而又不提交表单,则必须给它输入type =“ button”。否则,它将尝试提交表单。我相信vaskort可以通过一些文档来回答这一问题。
通过将属性type =“ button”添加到vue中的button元素,我能够摆脱消息。
<button type="button">my button</button>
我们必须在按钮元素中添加以上属性
您也可以通过在jquery-xxxjs中应用单个补丁来解决此问题,只需在“ try {rp;} catch(m){}”行1833行之后添加以下代码:
if (r instanceof HTMLFormElement &&! r.parentNode) {
r.style.display = "none"; document.body.append (r);
r [p] ();
}
这会验证表单是否不是正文的一部分并进行添加。
我注意到我收到此错误,因为我的HTML代码没有<body>
标签。
如果没有<body>
,则whendocument.body.appendChild(form);
语句没有要附加的body对象。
我看到此消息是使用angular的,所以我只是将method =“ post”和action =“”取出来,警告已经消失了。
文章标签:google-chrome , javascript , jquery , jquery-1.7
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!