Question

这有什么问题？

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的：

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

Answer 1

试试这个：

$("#cpa-form").submit(function(e){
    return false;
});

Answer 2

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

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

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

Answer 3

我认为上述答案都是正确的，但这并未指出为什么submit方法不起作用。

好吧，如果jQuery无法获取submit元素，form方法将无效，并且jQuery不会给出任何错误。如果您的脚本放在文档的头部，请确保代码在DOM 准备好后运行。因此，$(document).ready(function () { // your code here // });将解决问题。

最佳做法是，始终将您的脚本放在文档的底部。

Answer 4

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

Answer 5

$(document).ready(function(){
    $("#form_id").submit(function(){
        return condition;
    });
});

Answer 6

这是一个古老的问题，但这里接受的答案并没有真正解决问题的根源。

你可以解决这两种方式。首先使用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来解决此问题。

Answer 7

您的代码很好，只需将其置于就绪功能中即可。

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

Answer 8

已弃用 - 此部分已过时，请勿使用。

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

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

UPDATE - 如果要处理动态添加的内容，则应尝试使用jQuery on（）方法尝试侦听文档DOM。

案例1，静态版本：如果您只有几个侦听器并且要处理的表单是硬编码的，那么您可以直接在“文档级别”进行侦听。我不会在文档级别上使用侦听器，但我会尝试深入了解末日树，因为它可能导致性能问题（取决于您的网站和内容的大小）

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

OR

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

案例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           
    })
});

Answer 9

您好寻求一个解决方案，使Ajax表单与Google跟踪代码管理器（GTM）一起工作，返回错误阻止完成并在Google分析解决方案上实时提交事件的激活是通过e更改返回false。 preventDefault（）;工作正常遵循代码：

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

Answer 10

e.preventDefault（）仅在您的JavaScript没有问题的情况下才能正常运行，如果e.preventDefault（）不起作用，请检查您的javascript，如果您的JS的其他某些部分也不起作用

Answer 11

好吧，我遇到了类似的问题。对我来说，问题是在DOM渲染发生之前就已加载JS文件。因此，将您的<script>移到<body>标签的末尾。

或使用延期。

<script defer src="">

请放心e.preventDefault()应该起作用。

防止表单上的默认值提交jQuery

11 个答案: