Disable submit functionality for all forms on a HTML page

Question

Using the .NET Windows Forms WebBrowser control to show the preview of a page, I\'m using the following approach described in this SO posting to disable all links on the pag

Answer 1

If you want to prevent just form submits:

I think that best approach to just prevent <form> from sending anything to anywhere is to:

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

This disables all forms on page, no need to do individually for every form.

JSFiddle demonstration enable/disable form submit:

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

Answer 2

<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>

my other answer has a more specific one-off example: https://stackoverflow.com/a/64831209/965666

Answer 3

Then you could use a combination of..

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

and

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

Answer 4

using jquery i would do this

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

with jquery you normally dont use .attr(...) to bind event listeners instead you should use the helper methods, or .bind(...)

here its the complete reference: jQuery events

Answer 5

You should be able to do:

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

From the jQuery documentation:

In jQuery 1.4.3 you can now pass in false in place of an event handler. This will bind an event handler equivalent to: function(){ return false; }. This function can be removed at a later time by calling: .unbind( eventName, false ).

Answer 6

Use event delegation to prevent all form within the body to be submitted.

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

By the way, your Javascript code to disable all links on the page is not a good way to do. You could use instead something like

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

Here is a working demo http://jsfiddle.net/pomeh/TUGAa/