防止提交带有 onclick 事件的提交按钮答案

【问题标题】：Prevent submit button with onclick event from submitting防止提交带有 onclick 事件的提交按钮
【发布时间】：2013-02-22 15:16:10
【问题描述】：

我想阻止带有 onclick 事件的提交按钮提交：

$j('form#userForm .button').click(function(e) {
    if ($j("#zip_field").val() > 1000){
        $j('form#userForm .button').attr('onclick','').unbind('click');
        alert('Sorry we leveren alleen inomstreken hijen!');
        e.preventDefault();
        return false;
    }
});

这是提交按钮：

<button class="button vm-button-correct" type="submit"
 onclick="javascript:return myValidator(userForm, 'savecartuser');">Opslaan</button>

它会显示“alert”功能并移除 onclick 事件，但无论如何都会提交表单。在提交之前手动删除onclick事件将解决问题。但是，这是核心功能，我不想删除它。

编辑：

这肯定是由 onclick 选择器引起的。如何强制我的 jQuery 脚本立即重新加载 onclick 事件？在 jquery 代码之前添加：$j('form#userForm .button').attr('onclick',''); 将解决问题.. 但是我的验证将不再起作用...

【问题讨论】：

您真的应该在表单的提交处理程序中执行此操作。如果您在表单获得焦点时按 Enter 键。它将触发提交处理程序而不是您的点击，因此您的验证将被绕过

标签： jquery submit preventdefault

【解决方案1】：

您需要将事件添加为参数：

$j('form#userForm .button').click(function(event) { // <- goes here !
    if ( parseInt($j("#zip_field").val(), 10) > 1000){
        event.preventDefault();
        $j('form#userForm .button').attr('onclick','').unbind('click');
        alert('Sorry we leveren alleen inomstreken hijen!');
    }   
});

另外，val() 总是返回一个字符串，所以一个好的做法是在将其与数字进行比较之前将其转换为数字，我不确定您是否真的针对所有 .button 元素在函数内部#userForm，还是应该使用this？

如果你使用的是 jQuery 1.7+，你真的应该考虑使用 on() 和 off()。

【讨论】：

thx，我编辑了代码，但它不起作用..我猜 onclick 事件破坏了 prevent.default ...？
内联的 onclick 将始终首先执行，同时拥有这样的内联函数和事件处理程序并不是一个很好的做法，您可能应该重新考虑这一点，并选择事件处理程序，并从外部事件处理程序调用myvalidator()。
非常感谢！我现在发现了；）但是我不想破坏美德玛特的核心代码。所以这就是我尝试这样解决的原因！
您可以在页面加载时删除 onclick 函数，就像您现在在 click 函数中执行此操作一样，只需在 document.ready 函数中执行此操作即可？
我做了并编辑了你的代码！ thx 我是新手，但我慢慢掌握它！

【解决方案2】：

基本上，如果您将按钮类型从 type="submit" 更改为 type="button"，则此类按钮将不会提交表单，并且不需要任何变通方法。

希望这会有所帮助。

【讨论】：

很多谢谢...但是我很确定 onclick 事件是罪魁祸首
这个答案解决了我的问题，对我来说这应该被标记为正确答案，因为它更普遍:) 非常感谢！
我正在使用 JQuery 验证。我有一个带有type="button" 的按钮，但是当验证失败时表单仍然回发！ Here 是我的问题。

【解决方案3】：

不要忘记有函数/事件参数，但必须指定参数：

$("#thing").click(function(e) {
  e.preventDefault();
});

通过这种方式，提交被暂停，因此您可以对其进行条件化。

【讨论】：

【解决方案4】：

最好的方法是在表单的提交事件处理程序中完成所有操作。移除内联 onclick 并在提交函数中运行它

$j('#userForm').submit(function(e) {
    if (+$j("#zip_field").val() > 1000){
        alert('Sorry we leveren alleen inomstreken hijen!');
        return false;
    }
    return myValidator(userForm, 'savecartuser');
});

【讨论】：

【解决方案5】：

我相信有一个更简单的方法：

$j('form#userForm .button').click(function(event) { // <- goes here !
    if ( parseInt($j("#zip_field").val(), 10) > 1000){
        event.stopPropagation();
    }   
});

【讨论】：