防止表单提交 jQuery 的默认设置

这有什么问题吗？

HTML:

<form action="<URL>http://localhost:8888/bevbros/index.php/test"
method="post" accept-charset="utf-8" id="cpa-form" class="forms">
<input type="text" name="zip" id="Zip" class="required valid">
<input type="submit" name="Next" value="Submit" class="forms" id="1">
</form>

JQuery:

$("#cpa-form").submit(function(e){
e.preventDefault();
});
560993 次浏览
小开
最佳答案

试试这个:

$("#cpa-form").submit(function(e){
return false;
});
小开 
$(document).ready(function(){
$("#form_id").submit(function(){
return condition;
});
});
小开

使用新的“ on”事件语法。

$(document).ready(function() {
$('form').on('submit', function(e){
// validation code here
if(!valid) {
e.preventDefault();
}
});
});

引用: https://api.jquery.com/on/

小开 
$('#cpa-form input[name="Next"]').on('click', function(e){
e.preventDefault();
});
小开

反对 -此部分已过时，请不要使用。

如果以后添加了动态窗体，也可以尝试使用此代码。例如，您使用 ajax 加载了一个窗口异步，并希望提交此表单。

$('#cpa-form').live('submit' ,function(e){
e.preventDefault();
// do something
});

UPDATE -如果您想处理动态添加的内容，那么应该使用 jQuery on ()方法尝试监听文档 DOM。

Case 1，static version: 如果您只有几个侦听器，并且要处理的表单是硬编码的，那么您可以直接在“文档级别”上侦听。我不会在文档级别使用侦听器，但我会尝试深入到末日树中，因为它可能导致性能问题(取决于您的网站和内容的大小)

$('form#formToHandle').on('submit'...

或者

$('form#formToHandle').submit(function(e) {
e.preventDefault();
// do something
});

案例2，动态版本: 如果您已经在代码中侦听了文档，那么这种方式将对您有好处。这也适用于后来通过 DOM 或使用 AJAX 动态添加的代码。

$(document).on('submit','form#formToHandle',function(){
// do something like e.preventDefault();
});

或者

$(document).ready(function() {
console.log( "Ready, Document loaded!" );


// all your other code listening to the document to load


$("#formToHandle").on("submit", function(){
// do something
})
});

或者

$(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
})
});
小开

我相信以上的答案都是正确的，但是这并不能说明为什么 submit方法不起作用。

好吧，如果 jQuery 不能得到 form元素，那么 submit方法就不能工作，而且 jQuery 没有给出任何关于这一点的错误。如果您的脚本放在文档的头部，请确保代码在 DOM是 准备好了之后运行。因此，$(document).ready(function () { // your code here // });将解决这个问题。

最好的练习是 总是把你的脚本放在文件的底部。

小开

Hello 寻求一个解决方案，让一个 Ajax 表单与 Google Tag Manager (GTM)一起工作，返回 false 阻止了事件的完成，并提交了在 Google 分析解决方案中实时激活的事件，这个方案改变了返回 false，通过 e.proventDefault () ; 正确工作的代码如下:

 $("#Contact-Form").submit(function(e) {
e.preventDefault();
...
});
小开

你的代码是罚款只是你需要把它内的就绪函数。

$(document).ready( function() {
$("#cpa-form").submit(function(e){
e.preventDefault();
});
}
小开

这是一个古老的问题，但这里公认的答案并没有真正找到问题的根源。

有两种方法可以解决这个问题: 第一种是 jQuery:

$(document).ready( function() { // Wait until document is fully parsed
$("#cpa-form").on('submit', function(e){


e.preventDefault();


});
})

或者没有 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();


});

您不需要使用 return false来解决这个问题。

小开

只有当你的 javascript 没有问题的时候, 检查你的 javascript，如果 e.proventDefault ()不工作，你的 JS 的其他部分可能也不工作

小开

我也遇到过类似的问题。对我来说，问题在于 JS 文件在 DOM 呈现发生之前就被加载了。因此，将 <script>移动到 <body>标记的末尾。

或使用延期。

<script defer src="">

所以放心，e.preventDefault()应该可以工作。

小开

只要定义你的按钮类型，这将防止表单刷新网页

<button type="button" id="saveBtn">Save</button>

 $('#saveBtn').click(function() {


});
小开

对我有用:

     $("#submitButtonOnForm").click(function(e) {
if (somecondition) {
e.preventDefault();
console.log('not submitted');
}
//form submission continues, no code needed
});

提交答案