jquery - 防止提交带有 onclick 事件的提交按钮

Question

我想阻止带有 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>

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

编辑：

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

score 32 · Accepted Answer

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

$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()and off()。

score 18 · Accepted Answer

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

希望这可以帮助。

score 4 · Accepted Answer

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

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

这样，提交就会停止，因此您可以对其进行条件化。

score 0 · Accepted Answer

最好的方法是在表单的提交事件处理程序中做所有事情。删除内联 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');
});

score -2 · Accepted Answer

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

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

jquery - 防止提交带有 onclick 事件的提交按钮

5 回答 5

Related

Reference