防止表单提交 jQuery 上的默认值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6462143/
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
Prevent Default on Form Submit jQuery
提问by djreed
What's wrong with this?
这有什么问题？
HTML:
HTML：
<form action="http://localhost:8888/bevbros/index.php/test" method="post" accept-charset="utf-8" id="cpa-form" class="forms">
<input type="text" name="zip" value="Zip code" id="Zip" class="required valid">
<input type="submit" name="Next" value="Submit" class="forms" id="1">
</form>
jQuery:
jQuery：
$("#cpa-form").submit(function(e){
e.preventDefault();
});
回答by Jordan Brown
Try this:
尝试这个：
$("#cpa-form").submit(function(e){
return false;
});
回答by scarver2
Use the new "on" event syntax.
使用新的“on”事件语法。
$(document).ready(function() {
$('form').on('submit', function(e){
// validation code here
if(!valid) {
e.preventDefault();
}
});
});
回答by towry
I believe that the above answers is all correct, but that doesn't point out why the submitmethod doesn't work.
我相信上面的答案都是正确的，但这并不能说明为什么该submit方法不起作用。
Well, the submitmethod will not work if jQuery can't get the formelement, and jQuery doesn't give any error about that. If your script is placed in the head of the document, make sure the code runs after DOMis ready. So, $(document).ready(function () { // your code here // });will solve the problem.
好吧，submit如果 jQuery 无法获取form元素，该方法将不起作用，并且 jQuery 不会对此给出任何错误。如果你的脚本放在文档的头部，确保代码运行后DOM是准备好。所以，$(document).ready(function () { // your code here // });会解决问题。
The best practice is, always put your script in the bottom of the document.
最佳做法是，始终将脚本放在文档底部。
回答by Chuck Le Butt
This is an ancient question, but the accepted answer here doesn't really get to the root of the problem.
这是一个古老的问题，但这里接受的答案并没有真正解决问题的根源。
You can solve this two ways. First with jQuery:
您可以通过两种方式解决此问题。首先使用 jQuery：
$(document).ready( function() { // Wait until document is fully parsed
$("#cpa-form").on('submit', function(e){
e.preventDefault();
});
}
Or without jQuery:
或者没有 jQuery：
// Gets a reference to the form element
var form = document.getElementById('cpa-form');
// Adds a listener for the "submit" event.
form.addEventListener('submit', function(e) {
e.preventDefault();
});
You don't need to use return falseto solve this problem.
你不需要使用return false来解决这个问题。
回答by Crisalin Petrovschi
$('#cpa-form input[name="Next"]').on('click', function(e){
e.preventDefault();
});
回答by shraddha Dharmamer
$(document).ready(function(){
$("#form_id").submit(function(){
return condition;
});
});
回答by NFlows
DEPRECATED- this part is outdated so please don't use it.
已弃用- 此部分已过时，因此请不要使用它。
You can also try this code, if you have for example later added dynamic forms. For example you loaded a window async with ajax and want to submit this form.
如果您稍后添加了动态表单，您也可以尝试使用此代码。例如，您使用 ajax 加载了一个异步窗口并希望提交此表单。
$('#cpa-form').live('submit' ,function(e){
e.preventDefault();
// do something
});
UPDATE- you should use the jQuery on() method an try to listen to the document DOM if you want to handle dynamically added content.
更新- 如果您想处理动态添加的内容，您应该使用 jQuery on() 方法尝试侦听文档 DOM。
Case 1, static version:If you have only a few listeners and your form to handle is hardcoded, then you can listen directly on "document level". I wouldn't use the listeners on document level but I would try to go deeper in the doom tree because it could lead to performance issues (depends on the size of your website and your content)
案例 1，静态版本：如果您只有几个侦听器并且您要处理的表单是硬编码的，那么您可以直接在“文档级别”上进行侦听。我不会在文档级别使用侦听器，但我会尝试更深入地了解厄运树，因为它可能会导致性能问题（取决于您的网站和内容的大小）
$('form#formToHandle').on('submit'...
OR
或者
$('form#formToHandle').submit(function(e) {
e.preventDefault();
// do something
});
Case 2, dynamic version:If you already listen to the document in your code, then this way would be good for you. This will also work for code that was added later via DOM or dynamic with AJAX.
案例2，动态版本：如果你已经在你的代码中收听了文档，那么这种方式对你有好处。这也适用于稍后通过 DOM 添加或使用 AJAX 动态添加的代码。
$(document).on('submit','form#formToHandle',function(){
// do something like e.preventDefault();
});
OR
或者
$(document).ready(function() {
console.log( "Ready, Document loaded!" );
// all your other code listening to the document to load
$("#formToHandle").on("submit", function(){
// do something
})
});
OR
或者
$(function() { // <- this is shorthand version
console.log( "Ready, Document loaded!" );
// all your other code listening to the document to load
$("#formToHandle").on("submit", function(){
// do something
})
});
回答by Jai Kathuria
Your Code is Fine just you need to place it inside the ready function.
你的代码很好，只是你需要把它放在 ready 函数中。
$(document).ready( function() {
$("#cpa-form").submit(function(e){
e.preventDefault();
});
}
回答by Navi
Hello sought a solution to make an Ajax form work with Google Tag Manager (GTM), the return false prevented the completion and submit the activation of the event in real time on google analytics solution was to change the return false by e.preventDefault (); that worked correctly follows the code:
Hello 寻求一种解决方案使 Ajax 表单与 Google Tag Manager (GTM) 一起工作，返回 false 阻止了完成并在 google 分析上实时提交事件的激活解决方案是通过 e.preventDefault() 更改返回 false ; 正常工作的代码如下：
$("#Contact-Form").submit(function(e) {
e.preventDefault();
...
});
回答by ndoty
e.preventDefault() works fine only if you dont have problem on your javascripts, check your javascripts if e.preventDefault() doesn't work chances are some other parts of your JS doesn't work also
e.preventDefault() 仅在您的 javascripts 没有问题时才能正常工作，如果 e.preventDefault() 不起作用，请检查您的 javascripts 可能是您的 JS 的其他部分也不起作用
