使用JQuery – 阻止表单提交
如何防止使用jQuery提交表单?
我尝试了一切 – 看到下面我尝试了3个不同的选项,但它都不起作用:
$(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; }); });
什么可能是错的?
更新 – 这是我的HTML:
<form id="form" class="form" action="page2.php" method="post"> <!-- tags in the form --> <p class="class2"> <input type="submit" value="Okay!" /> </p> </form>
这里有什么不对吗?
有两件事情脱颖而出:
- 有可能您的表单名称不是
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>
您可能在页面上使用了几个表单,并使用$('form')。submit()将此事件添加到页面上表单的第一个匹配项。 改为使用类select器,或者试试这个:
$('form').each(function(){ $(this).submit(function(){ e.preventDefault(); alert('it works!'); return false; }) })
或更好的版本:
$(document).on("submit", "form", function(e){ e.preventDefault(); alert('it works!'); return false; });
为了prevant默认/防止表单提交使用
e.preventDefault();
要停止事件冒泡使用
e.stopPropagation();
为了防止表单提交“返回false”也应该工作。
我也有同样的问题。 我也尝试了你曾经尝试过的。 然后我改变我的方法不使用jquery,而是通过在表单标签中使用“onsubmit”属性。
<form onsubmit="thefunction(); return false;">
有用。
但是,当我试图把false返回值只放在“function()”中时,它并不妨碍提交过程,所以我必须把“return false” 在onsubmit属性中。 所以,我认为我的表单应用程序无法从Javascript函数获取返回值。 我对此毫不知情。
我有同样的问题,我解决了这种方式(不优雅,但它的工作原理):
$('#form').attr('onsubmit','return false;');
在我看来,它的好处是你可以在任何时候恢复情况:
$('#form').attr('onsubmit','return true;');
你忘记了表单ID,它的工作原理
$('form#form').submit(function(e){ e.preventDefault(); alert('prevent submit'); });
$("#form')
查找id="form"
的元素。
$('form')
查找表单元素
当我使用<form>
标签没有属性id="form"
,并通过它的标签名称直接在jQuery中调用它与我一起工作。
你的代码在html文件中:
<form action="page2.php" method="post">
并在jquery脚本中:
$(document).ready(function() { $('form').submit(function(evt){ evt.preventDefault();// to stop form submitting }); });