How to reenable event.preventDefault?

JavascriptJquery

Javascript Problem Overview


I have a web page which I have prevented the default action on all submit buttons, however I would like to re-enable default submit action on a button how can I do this?

I am currently preventing the default action using the following:

$("form").bind("submit", function(e){
e.preventDefault();
});

I have successfully done this using the following:

$(document).ready(function(){
$("form:not('#press')").bind("submit", function(e){
e.preventDefault();
});

But can I do this dynamically when the button is clicked?

Javascript Solutions


Solution 1 - Javascript

You would have to unbind the event and either rebind to a separate event that does not preventDefault or just call the default event yourself later in the method after unbinding. There is no magical event.cancelled=false;

As requested

 $('form').submit( function(ev){
        
         ev.preventDefault();
  
         //later you decide you want to submit
         $(this).unbind('submit').submit()

  });

Solution 2 - Javascript

Either you do what redsquare proposes with this code:

function preventDefault(e) {
    e.preventDefault();
}
$("form").bind("submit", preventDefault);

// later, now switching back
$("form#foo").unbind("submit", preventDefault);

Or you assign a form attribute whenever submission is allowed. Something like this:

function preventDefault(e) {
    if (event.currentTarget.allowDefault) {
        return;
    }
    e.preventDefault();
}
$("form").bind("submit", preventDefault);

// later, now allowing submissions on the form
$("form#foo").get(0).allowDefault = true;

Solution 3 - Javascript

function(e){ e.preventDefault();

and its opposite

function(e){ return true; }

cheers!

Solution 4 - Javascript

$('form').submit( function(e){

     e.preventDefault();

     //later you decide you want to submit
     $(this).trigger('submit');     or     $(this).trigger('anyEvent');

Solution 5 - Javascript

With async actions (timers, ajax) you can override the property isDefaultPrevented like this:

$('a').click(function(evt){
  e.preventDefault();

  // in async handler (ajax/timer) do these actions:
  setTimeout(function(){
    // override prevented flag to prevent jquery from discarding event
    evt.isDefaultPrevented = function(){ return false; }
    // retrigger with the exactly same event data
    $(this).trigger(evt);
  }, 1000);
}

This is most complete way of retriggering the event with the exactly same data.

Solution 6 - Javascript

I had a similar problem recently. I had a form and PHP function that to be run once the form is submitted. However, I needed to run a javascript first.

        // This variable is used in order to determine if we already did our js fun
        var window.alreadyClicked = "NO"
        $("form:not('#press')").bind("submit", function(e){
            // Check if we already run js part
            if(window.alreadyClicked == "NO"){
                // Prevent page refresh
                e.preventDefault();
                // Change variable value so next time we submit the form the js wont run
                window.alreadyClicked = "YES"
                // Here is your actual js you need to run before doing the php part
                xxxxxxxxxx

                // Submit the form again but since we changed the value of our variable js wont be run and page can reload (and php can do whatever you told it to)
                $("form:not('#press')").submit()
            } 
        });

Solution 7 - Javascript

You can re-activate the actions by adding

this.delegateEvents();	// Re-activates the events for all the buttons

If you add it to the render function of a backbone js view, then you can use event.preventDefault() as required.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRichbitsView Question on Stackoverflow
Solution 1 - JavascriptredsquareView Answer on Stackoverflow
Solution 2 - JavascriptPatrice NeffView Answer on Stackoverflow
Solution 3 - JavascriptfoxybaggaView Answer on Stackoverflow
Solution 4 - JavascriptadardesignView Answer on Stackoverflow
Solution 5 - JavascriptTomislav SimićView Answer on Stackoverflow
Solution 6 - JavascriptJiří VítekView Answer on Stackoverflow
Solution 7 - Javascriptuser3521417View Answer on Stackoverflow