防止表单提交上的默认 jQuery

Question

这有什么问题吗？

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

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

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

您可以通过两种方式解决这个问题。首先使用 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 4

我相信上面的答案都是正确的，但这并没有指出为什么 submit 方法不起作用。

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

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

Answer 5

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

Answer 6

已弃用 - 此部分已过时，因此请不要使用它。

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

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

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

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

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

Answer 7

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

Answer 8

你的代码很好，只是你需要将它放在准备好的函数中。

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

Answer 9

你好寻求一种解决方案，使 Ajax 表单与 Google 跟踪代码管理器 (GTM) 配合使用，返回 false 阻止完成并在 google Analytics 上实时提交事件的激活，解决方案是通过 e.preventDefault () 更改返回 false ;正确运行的代码如下：

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

Answer 10

仅当您的 javascript 没有问题时，e.preventDefault() 才能正常工作，
如果 e.preventDefault() 不起作用，请检查你的 javascripts 很可能你的 JS 的其他部分也不起作用

Answer 11

好吧，我遇到了类似的问题。对我来说，问题是 JS 文件在 DOM 渲染发生之前加载。因此，将

或使用延迟。

<script defer src="">

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

Answer 12

只需定义您的按钮类型，这将阻止表单刷新网页

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

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

 });

Answer 13

为我工作：

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