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

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

Since the HTML page I want to show as the preview also contains HTML forms, I'm looking for a similar approach to disable all form submit functionality.

I've tried:

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

But it seems that this doesn't work (read: "still loads the page") for a form like:

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

which I have on the page.

So my question is:

What is the best way to disable all form submit functionality on a HTML page, no matter whether it is a GET or a POST form?

Answer 1

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 2

Use this:

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

Answer 3

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 4

Then you could use a combination of..

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

and

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

Answer 5

You can either disable the submit buttons

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

or just make the submit event do nothing

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

It depends what exactly are you trying to achieve.

Answer 6

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 7

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/

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>

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