OnClick 绕过表单提交答案

【问题标题】：OnClick bypasses form submitOnClick 绕过表单提交
【发布时间】：2012-12-20 09:23:44
【问题描述】：

我有一个这样的表格：

<form id= 'lol' name = 'whyyyyy'>
<input name='dumbo'>
<input name='idiot'>

<input type='submit' value='I have no idea why its like this' onclick='document.lol.submit()'>
</form>

现在，我想阻止实际发送表单，但到目前为止所有尝试都失败了。

我当前的代码如下所示：

$(document).ready(function(){
    $('form[name="whyyyyy"]').submit(function(e){
       e.preventDefault();
        alert(1);
        return false;
     });
})

但内联提交命令似乎绕过了 jQuery 函数。

有人可以把光切碎吗？

编辑：

表格无法更改，我无权更改。
点击代码应该触发提交功能，其中包含一些复杂的代码验证墙。所以我必须缓存它触发的提交操作，但我现在不能这样做。
提交功能应在发送时触发，但未触发。

这是 jfiddle 中的代码示例。正如你所看到的，它被 jQuery 超越了......

http://jsfiddle.net/StCPp/4/

【问题讨论】：

单引号是怎么回事，你应该用双引号来包裹属性值
提交处理程序是否执行并显示警报？
不，这是问题所在，执行处理程序被忽略了。
根据我的测试，内联函数实际上不起作用，您的脚本可以成功阻止提交表单。 jsfiddle.net/akGY3/1
所以获得更改它的权限。你所面临的限制是荒谬的！

标签： javascript jquery forms submit jquery-events

【解决方案1】：

如果您不需要提交按钮，为什么不使用常规按钮来代替

<input type="button" />

【讨论】：

这不是我的表单，我必须实现一个工作区并且不能更改遗留代码.. Q___Q
看来您错过了重点，重点在于绕过 jquery 处理程序的 on click 事件
因为不在我的编辑范围内，所以无权修改。

【解决方案2】：

<input type='button' value='i have no idea why he done it like this' onclick='document.getElementById('lol').submit()'>

【讨论】：

正如在回复@RiccoE 时指出的那样，我无法更改该部分...只有文档准备好的部分

【解决方案3】：

只需使用普通按钮而不是提交。

如果你想绕过提交按钮，你可以取消按钮的类。

 <input type='submit' class='cancel' value='i have no idea why he done it like this' onclick='document.lol.submit()'>

【讨论】：

不能自己编辑表单，需要从文档准备功能实现解决方案。
然后在文档准备功能中的提交按钮中添加取消类。 addClass('取消')
那会完成什么？

【解决方案4】：

在您的附加 JavaScript 中，删除内联 onclick 事件并将其替换为您想要的任何内容。问题解决了。

您也可以完全移除他的按钮并用您选择的一个替换它。

【讨论】：

抱歉不能这样做，因为我不能直接编辑表单，而且表单在点击功能中有一些大的代码墙。最终触发表单提交，忽略 jquery，我猜是因为它在如此低的级别上触发。
你可以保存点击函数并在你完成新东西后调用它吗？

【解决方案5】：

删除document.lol.submit 函数。这样，您就可以为所欲为。

// Magic line
delete document.lol.submit;

// Or
$('form[name="whyyyyy"] input[type=submit]').attr('onclick', '');

$(document).ready(function(){
    $('form[name="whyyyyy"]').submit(function(e){
        e.preventDefault();
        alert(1);
        return false;
    });
});

【讨论】：

那不行，刚刚试了一下。我猜是因为它是在一个内联代码中发送的，它代表一个新的 js 实例。并且删除不会通过它或不知道是什么。
@Sangoku 你两个都试过了吗？
我不能使用删除点击功能，因为它有一些巨大的遗留代码。
@Sangoku 然后将其删除，将其存储在某处，阻止表单，然后重新运行您存储的功能。如果提交发生在函数中，您必须更改它。
我找到了解决方案，不是 jqrey 但仍然可以使用。

【解决方案6】：

好的，如果我做对了，您可以删除内联事件处理程序 onclick 并添加您的自定义处理程序（您可以在其中进行验证和所有必要步骤）：

$(document).ready(function() {

   var $submit_button = $('input[type=submit]');

   $submit_button.removeAttr('onclick');

   $submit_button.click(function() {
     //TODO: implement your custom handler
     //execute validation etc.
   });

});

【讨论】：

遗憾的是没有。点击功能是由一个文件的怪物生成的，比如超过 10 年的 2k 行......但我设法将最终结果提交操作绑定到一个函数。我可以问一下为什么投反对票吗？
当然，请检查您回答中的语言。另外，下次如果您有特定的限制，请在问题中立即说明，而不是在收到很多答案后说明。

【解决方案7】：

移除onclick

$('input[type=submit]').attr('onclick','')

然后将点击事件添加到功能就绪

 $('input[type=submit]').on('click',function(){
      //do your event
});

【讨论】：

你应该使用正确的选择器来只获取提交按钮$('input[type=submit]')

【解决方案8】：

您不一定需要使用 jquery 来实现这一点。你可以使用标准的javascript。

$(document).ready(function(){

    document.whyyyyy.submit = function(e){

        alert(1);
        return false; 
};
});

此示例有效，但您可能遇到了 jquery 错误。

【讨论】：