防止表单提交上的默认jQuery

Posted 2023-05-08

【中文标题】防止表单提交上的默认jQuery

【英文标题】：Prevent Default on Form Submit jQuery

【发布时间】：2011-09-21 16:08:57

【问题描述】：

这是怎么回事？

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

【问题讨论】：

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

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

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

event.preventDefault() vs. return false的可能重复

！确保 DOM 准备好后运行 javascript 代码。

【参考方案1】：

试试这个：

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

【讨论】：

它有效，但为什么 preventDefault 的首选方法不起作用？

查看这个问题以获得更好的解释：***.com/questions/1357118/…

这是错误的答案。 e.preventDefault() 可以很好地提交表单，问题出在 OP 代码的其他地方。使用return false可能导致意想不到的后果。

【参考方案2】：

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

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

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

【讨论】：

嗨。这对我不起作用。 （是的，我把我的代码放在$(document).ready() 中）我如何让它工作？

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

您好，我使用来自jQuery validationEngine 的$('#myFormID').validationEngine('validate') 作为变量valid，以检查输入是否是有效的电子邮件地址。不过，我希望它以任何一种方式防止默认行为； preventDefault 必须在 if 块内，而不是在它之前吗？

@GuiImamura 很高兴听到你让它工作。 preventDefault 位于 if not valid 块内以停止提交表单。换句话说，如果有效，使用表单的默认行为。

【参考方案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来解决这个问题。

【讨论】：

我替换了原生 js 事件监听器而不是 jquery 事件监听器，它的工作。谢谢你的想法。

【参考方案4】：

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

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

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

【参考方案5】：

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

【讨论】：

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

【参考方案6】：

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

【参考方案7】：

你的代码没问题，只是你需要把它放在 ready 函数中。

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

【讨论】：

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

【参考方案8】：

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

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

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

UPDATE - 如果你想处理动态添加的内容，你应该使用 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           
    )
);

【讨论】：

.live() 自 jQuery 1.7 起已弃用，自 1.9 起已被删除。请改用.on()。

【参考方案9】：

Hello 寻求一种解决方案，使 Ajax 表单与 Google 跟踪代码管理器 (GTM) 一起使用，返回 false 阻止了完成并在 google 分析解决方案上实时提交激活事件是通过 e 更改返回 false。防止默认（）；正确工作的代码如下：

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

【参考方案10】：

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

【参考方案11】：

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

或使用延迟。

<script defer src="">

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

【参考方案12】：

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

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

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

 );