禁用 HTML 页面上所有表单的提交功能

Question

使用.NET Windows Forms WebBrowser控件来显示页面的预览，我正在使用此 SO 发布中描述的以下方法来禁用页面上的所有链接：

$(function() {
    $('a').click(function() {
        $(this).attr('href', 'javascript:void(0);');
    });
});

由于我想作为预览显示的 HTML 页面也包含 HTML 表单，因此我正在寻找一种类似的方法来禁用所有表单提交功能。

我试过了：

$(function() {
    $('form').attr('onsubmit', 'return false');
});

但对于以下表单，这似乎不起作用（阅读：“仍在加载页面”）：

<form id="myform" name="myform" onsubmit="return search()" action="">

我在页面上。

所以我的问题是：

在 HTML 页面上禁用所有表单提交功能的最佳方法是什么，无论是 GET 表单还是 POST 表单？

Answer 1

你应该能够做到：

$('form').submit(false);

从jQuery 文档：

在 jQuery 1.4.3 中，您现在可以传入 false 来代替事件处理程序。 这将绑定一个等价于的事件处理程序： function(){ return false; }. 稍后可以通过调用： .unbind( eventName, false ) 删除此函数。

Answer 2

用这个：

<form id="myform" name="myform" onSubmit="search();return false;" action="">

Answer 3

使用 jquery 我会这样做

$('form').submit(function(event){event.preventDefault();});

使用 jquery，您通常不使用.attr(...)来绑定事件侦听器，而是应该使用辅助方法或.bind(...)

这里是完整的参考： jQuery events

Answer 4

然后你可以使用..的组合

$('form :submit').attr("disabled", "disabled");

和

$('form').unbind('submit');

Answer 5

您可以禁用提交按钮

$('form :submit').attr("disabled", "disabled");

或者只是让提交事件什么都不做

$('form').submit(function(e){ e.preventDefault(); });

这取决于你到底想达到什么目的。

Answer 6

如果你想阻止只是表单提交：

我认为阻止<form>向任何地方发送任何内容的最佳方法是：

$('form').submit( function(e){ 
    e.preventDefault();
});

这将禁用页面上的所有表单，无需为每个表单单独执行。

JSFiddle 演示启用/禁用表单提交：

http://jsfiddle.net/cDLsw/6/

Answer 7

使用事件委托来防止提交正文中的所有表单。

$("body").on("submit", "form", function( event ){
    event.preventDefault();
});

顺便说一句，您禁用页面上所有链接的 Javascript 代码不是一个好方法。 你可以使用类似的东西

// use "bind" instead of "on" if you use a jQuery version prior to 1.7
$("a").on( "click", function( ev ) {
    ev.preventDefault();
});

// or use event delegation
$("body").on( "click", "a", function( ev ) {
    ev.preventDefault();
});

// the power of event delegation in action:
// disable BOTH links and form with one event handler
$("body").on( "click", "a, form", function( ev ) {
    ev.preventDefault();
});

这是一个工作演示http://jsfiddle.net/pomeh/TUGAa/

Answer 8

<style>[busy]{pointer-events:none;}</style>
<form>....</form>
<form>....</form>
<form>....</form>
<script>
function disableIt(node){
    node.setAttribute('busy','');
    // later re-enable with node.removeAttribute('busy')
}
Array.from(document.querySelectorAll('form')).forEach(disableIt);
// NOTE other functions can return on form.hasAttribute('busy') if needed
</script>

我的另一个答案有一个更具体的一次性示例： https : //stackoverflow.com/a/64831209/965666