怎么了?
更新-这是我的html:
$(document).ready(function() {
//option A
$("#form").submit(function(e){
e.preventDefault();
});
//option B
$("#form").submit(function(e){
stopEvent(e);
});
//option C
$("#form").submit(function(){
return false;
});
});
这里有什么问题吗?
#1 楼
有两点突出:您的表单名称可能不是
form
。而是通过删除#来引用标签。
e.preventDefault
是正确的JQuery语法,例如 //option A
$("form").submit(function(e){
e.preventDefault();
});
选项C也应该起作用。我不熟悉选项B
完整的示例:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
//option A
$("form").submit(function(e){
alert('submit intercepted');
e.preventDefault(e);
});
});
</script>
</head>
<body>
<form action="http://google.com" method="GET">
Search <input type='text' name='q' />
<input type='submit'/>
</form>
</body>
</html>
评论
还有其他问题。我每天都在使用这种技术。最好的猜测是页面上有JavaScript错误,也许可以通过FireBug进行检查?
–菲利普·富里(Philip Fourie)
2012年2月19日下午6:58
@LucyWeatherford,我用一个有效的示例更新了我的答案。也许你发现了一些东西。
–菲利普·富里(Philip Fourie)
2012-2-19在7:23
在您的更新html中,我注意到您具有表单的类属性。将类属性的JQuery选择器从$('#form')更改为$('。form')。
–菲利普·富里(Philip Fourie)
2012年2月19日在7:30
谢谢!我最终在同一页面上使用了您的代码,并且仍然有效,尽管仍然不确定出什么问题,但是现在一切都很好。谢谢!
–露西·韦瑟福德(Lucy Weatherford)
2012年2月19日在8:16
@ÂngeloRigoe只是您为参数指定的名称,在这种情况下,它是Submit事件。
– squall3d
16年7月1日在15:53
#2 楼
您的页面可能没有几个表单,使用$('form')。submit()会将事件添加到页面上第一次出现的表单中。请改用类选择器,或尝试以下操作:$('form').each(function(){
$(this).submit(function(e){
e.preventDefault();
alert('it is working!');
return false;
})
})
或更好的版本:
$(document).on("submit", "form", function(e){
e.preventDefault();
alert('it works!');
return false;
});
评论
就我而言,返回false是关键。
– elquimista
16 Mar 4 '16 at 2:27
#3 楼
为防止默认/阻止表单提交,请使用e.preventDefault();
要停止事件冒泡,请使用
e.stopPropagation();
阻止表单提交“ return false”也应该起作用。
评论
查看此答案,因为jQuery处理这些问题的方式不同。 stackoverflow.com/questions/1357118/…
–闪闪发光
2012-2-19在6:51
选中此项以了解事件冒泡quirksmode.org/js/events_order.html
– Alpha
2012-2-19在6:54
API上的jQuery指出:“从事件处理程序返回false会自动调用event.stopPropagation()和event.preventDefault()。也可以为处理程序传递false值作为function()的简写{return false;} 。”
– Paul
15年8月21日在19:05
#4 楼
我也有同样的问题。我也尝试过你尝试过的。然后,我更改方法不使用jquery,而是通过在表单标记中使用“ onsubmit”属性。<form onsubmit="thefunction(); return false;">
它起作用。
但是,当我尝试仅将错误的返回值放在“ thefunction()”中时,它不会阻止提交过程,因此必须将“ return false;”放入在onsubmit属性中。因此,我得出结论,我的表单应用程序无法从Javascript函数获取返回值。我对此一无所知。
评论
这是假之间的区别;并返回false;。您需要onsubmit =“ return thefunction();”
–xr280xr
6月30日22:30
#5 楼
我遇到了同样的问题,并且以这种方式解决了这一问题(虽然不是很好,但它确实可行):随时需要的情况:$('#form').attr('onsubmit','return false;');
评论
还原表单提交预防$('#form')。removeAttr('onsubmit');时删除属性可能会更舒服一些。
–芭比娃娃
17年1月1日在5:27
#6 楼
将事件附加到Submit元素而不是form元素。例如在您的html中这样做
#7 楼
您可以简单地检查表单是否有效(如果是),运行提交逻辑,否则显示错误。HTML
<form id="form" class="form" action="page2.php" method="post">
<input type="text" class="check-validity" value="" />
<input type="text" class="check-validity" value="" />
<input type="text" class="check-validity" value="" />
<input type="text" class="check-validity" value="" />
<input type="text" class="check-validity" value="" />
<input type="text" class="check-validity" value="" />
<input type="text" class="check-validity" value="" />
<input type="submit" value="Okay!" />
</form>
Javascript
$(document).ready(function () {
var isFormValid = true;
function checkFormValidity(form){
isFormValid = true;
$(form).find(".check-validity").each(function(){
var fieldVal = $.trim($(this).val());
if(!fieldVal){
isFormValid = false;
}
});
}
//option A
$("#form").submit(function (e) {
checkFormValidity("#form");
if(isFormValid){
alert("Submit Form Submitted!!! :D");
}else{
alert("Form is not valid :(");
}
e.preventDefault();
});
});
#8 楼
当我使用不带属性<form>
的id="form"
标记并直接在jquery中通过其标记名称调用它时,它可以与我配合使用。您在html文件中的代码: />,并在Jquery脚本中:
<form action="page2.php" method="post">
#9 楼
$('#form')
寻找带有id="form"
的元素。$('form')
寻找表单元素#10 楼
您忘记了表单ID,它可以正常工作$('form#form').submit(function(e){
e.preventDefault();
alert('prevent submit');
});
#11 楼
// Prevent form submission
$( "form" ).submit(function( event ) {
event.preventDefault();
});
来自这里的:https://api.jquery.com/submit-selector/(有关提交类型的有趣页面)
#12 楼
这似乎也可以工作,并且可能稍微简单一些:$('#Form').on('submit',function(){
return false;
})
#13 楼
使用jQuery,您可以执行以下操作:1-将本机表单Submit事件与Submit按钮一起使用,同时防止触发事件,然后
2-检查表单有效属性
可以按以下方式实现:
1- HTML:
<form id="yourForm">
<input id="submit" type="submit" value="Save"/>
</form>
2- Javascript
$("form").on("submit", function (e) {
e.preventDefault();
if ($(this).valid()) {
alert('Success!');
}
});
评论
显示HTML是因为preventDefault没什么问题,或者发布时返回false,除了选择器完全错误之外。返回false; .submit()为我工作之后!我遇到了同样的问题
如果处理程序中发生JavaScript错误,请执行e.preventDefault();。代码未达到/未执行。