使用 JQuery - 防止表单提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9347282/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using JQuery - preventing form from submitting
提问by Lucy Weatherford
How do I prevent a form from submitting using jquery?
如何防止表单使用 jquery 提交？
I tried everything - see 3 different options I tried below, but it all won't work:
我尝试了所有方法 - 请参阅我在下面尝试过的 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;
});
});
What could be wrong?
可能有什么问题？
Update - here is my html:
更新 - 这是我的 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>
Is there anything wrong here?
这里有什么问题吗？
回答by Philip Fourie
Two things stand out:
有两点很突出：
- It possible that your form name is not
form. Rather refer to the tag by dropping the #. Also the
e.preventDefaultis the correct JQuery syntax, e.g.//option A $("form").submit(function(e){ e.preventDefault(); });
- 您的表单名称可能不是
form. 而是通过删除 # 来引用标签。 也是
e.preventDefault正确的 JQuery 语法，例如//option A $("form").submit(function(e){ e.preventDefault(); });
Option C should also work. I am not familiar with option B
选项 C 也应该有效。我不熟悉选项 B
A complete example:
一个完整的例子：
<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>
回答by Artem Kiselev
You probably have few forms o the page and using $('form').submit() adds this event to the first occurrence of the form on your page. Use class selector instead, or try this:
您可能在页面上只有很少的表单，并且使用 $('form').submit() 将此事件添加到页面上第一次出现的表单中。改用类选择器，或者试试这个：
$('form').each(function(){
$(this).submit(function(e){
e.preventDefault();
alert('it is working!');
return false;
})
})
or better version of it:
或者更好的版本：
$(document).on("submit", "form", function(e){
e.preventDefault();
alert('it works!');
return false;
});
回答by The Alpha
To prevent default/prevent form submission use
防止默认/防止表单提交使用
e.preventDefault();
To stop event bubbling use
停止事件冒泡使用
e.stopPropagation();
To prevent form submission 'return false' should work too.
为了防止表单提交，'return false' 也应该起作用。
回答by Luki B. Subekti
I also had the same problem. I also had tried what you had tried. Then I change my method not to use jquery but by using "onsubmit" attribute in the form tag.
我也有同样的问题。我也试过你试过的。然后我改变了我的方法，不使用 jquery，而是在表单标签中使用“onsubmit”属性。
<form onsubmit="thefunction(); return false;">
It works.
有用。
But, when I tried to put the false return value only in "thefunction()", it doesn't prevent the submitting process, so I must put "return false;" in onsubmit attribute. So, I conclude that my form application cannot get the return value from Javascript function. I don't have any idea about it.
但是，当我尝试将 false 返回值仅放在“thefunction()”中时，它不会阻止提交过程，因此我必须放置“return false;” 在提交属性中。因此，我得出结论，我的表单应用程序无法从 Javascript 函数中获取返回值。我对此一无所知。
回答by vinxxe
I had the same problem and I solved this way (not elegant but it works):
我遇到了同样的问题，我以这种方式解决了（不优雅但有效）：
$('#form').attr('onsubmit','return false;');
And it has the advantage, in my opinion, that you can revert the situation any time you want:
在我看来，它的优势在于您可以随时恢复这种情况：
$('#form').attr('onsubmit','return true;');
回答by M Weiss
Attach the event to the submit element not to the form element. For example in your html do like this
将事件附加到提交元素而不是表单元素。例如在你的 html 中这样做
$('input[type=submit]').on('click', function(e) {
e.preventDefault();
});
回答by Code Spy
You may simply check if the form is valid if yes run submit logic otherwise show error.
您可以简单地检查表单是否有效，如果是，则运行提交逻辑，否则显示错误。
HTML
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
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();
});
});
回答by Noha Salah
When I am using <form>tag without the attribute id="form"and call it by its tag name directly in jquery it works with me.
your code in html file :
当我使用<form>没有属性的标签id="form"并直接在 jquery 中通过标签名称调用它时，它与我一起工作。
您在 html 文件中的代码：
<form action="page2.php" method="post">
and in Jquery script:
并在 Jquery 脚本中：
$(document).ready(function() {
$('form').submit(function(evt){
evt.preventDefault();// to stop form submitting
});
});
回答by Rahul
$('#form')looks for an element with id="form".
$('#form')查找带有 的元素id="form"。
$('form')looks for the form element
$('form')寻找表单元素
回答by Chris Strong
// Prevent form submission
$( "form" ).submit(function( event ) {
event.preventDefault();
});
from here: https://api.jquery.com/submit-selector/(interesting page on submit types)
从这里：https: //api.jquery.com/submit-selector/（关于提交类型的有趣页面）
