防止表单上的默认提交jQuery

138

这怎么了

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

jquery preventdefault

— 杰瑞德
source

12

在这里工作正常。您可以在问题中发布更多信息吗？如果您alert()在提交处理程序中被调用？如果不是，则可能是脚本中存在错误，导致事件处理程序无法正确连接。错误控制台中有内容吗？

— 镇

3

该链接是内部的，对我们没有用。

— 史蒂夫·罗宾斯，

可能是缓存了旧版本。看起来现在正在工作。

— 2011年

1

与event.preventDefault（）的

— Liam

2

！确保在DOM准备就绪后运行javascript代码。

— 2015年

175

试试这个：

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

— 乔丹·布朗
source

12

它可以工作，但是preventDefault的首选方法为什么不起作用？

— MikeJ 2013年

26

请参阅以下问题以获取更好的解释：stackoverflow.com/questions/1357118/…–

— Jordan Brown

8

这是错误的答案。e.preventDefault()在提交表单时工作正常，问题出在OP的代码中。使用return false 可能会导致意想不到的后果。

— Chuck Le Butt

58

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

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

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

— Scarver2
source

2

你好这对我不起作用。（是的，我将代码放入其中$(document).ready()）如何使它起作用？

— 今村圭（Gui Imamura）2015年

1

@GuiImamura需要更多信息。您是否将有效变量设置为true或false？您可以在jsfiddle.net中重新创建代码并发送链接吗？尝试添加一个alert()以确认该功能正在触发。有人报告说，添加e.stopPropagation();之后可以e.preventDefault();停止触发其他连锁事件。

— scarver2

您好，我使用的是$('#myFormID').validationEngine('validate')从jQuery的validationEngine为变量valid，以请检查是否输入是一个有效的E-mail地址。尽管如此，我还是希望它能防止默认行为。是否preventDefault必须在if块内而不是之前？

— 2015年

@GuiImamura很高兴听到您使用它。如果无效，preventDefault则位于内，以停止提交表单。换句话说，如果有效，则使用表单的默认行为。

— scarver2

13

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

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

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

— 拖走
source

11

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

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

— 查克·勒·巴特
source

我替换了本机js事件侦听器，而不是jquery事件侦听器，它可以正常工作。谢谢你的想法。

— Orhan Gazi

6

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

— 克里斯塔林·彼得罗夫斯基（Crisalin Petrovschi）
source

这对于我在服务器端表单内有客户端表单的页面上非常适合。

— Liknes

3

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

— 什拉达玛法师
source

2

您的代码很好，只是您需要将其放在ready函数中。

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

— 杰·卡图里亚（Jai Kathuria）
source

其他答案已经提供了此建议。请删除此答案以减少页面膨胀。您可以投票代表其他观点的其他答案。

— mickmackusa

2

已淘汰 -该零件已过时，因此请不要使用它。

如果例如以后添加了动态表单，也可以尝试使用此代码。例如，您使用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           
    })
});

— 流
source

7

.live()从jQuery 1.7开始不推荐使用，从1.9开始不推荐使用。使用.on()代替。

— 汉克

0

您好寻求一种解决方案，以使Ajax表单与Google跟踪代码管理器（GTM）一起使用，返回false阻止了此事件的完成，并在谷歌分析解决方案上实时提交了该事件的激活，方法是通过e.preventDefault（）更改返回false ; 正常工作的代码如下：

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

— 纳维
source

0

仅当您的javascript没有问题时，e.preventDefault（）才能正常工作，如果e.preventDefault（）无效，则检查javascript，这是因为JS的其他某些部分也无法正常工作

— 恩多蒂
source

0

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

或使用延期。

<script defer src="">

因此请放心e.preventDefault()工作。

— 维涅什战争
source