CODEWITHSUNDEEP
jqueryuser-interfacedialog
ASD
ASD

Reputation: 4967

How to prevent onbeforeunload from being called when clicking submit button

How can I prevent onbeforeunload from being called when clicking the submit button? 

$(document).ready(function() 
 {
  $('input:text,input:checkbox,input:radio,textarea,select').one('change', function() 
  {
   //('BODY').attr('onbeforeunload',"return 'Leaving this page will cause any unsaved data to be lost.';");
   if(
   window.onbeforeunload = function() { return 'You have unsaved changes!'; }

  });

 });

Upvotes: 13

Views: 20723

Answers (5)

Anup Panwar
Anup Panwar

Reputation: 293

If you just want to disable Onbeforeunload Event on submit button. So here an example code 

document.getElementById('sub').onsubmit = function(e) {
 window.onbeforeunload = null;
 return true;
}

But if you want to monitors forms changes and alerts(confirmation Box) the user before leaving the page, Then I'll suggest you to you Plugin here is one jquery plugin that do exactly what i have written https://github.com/snikch/jquery.dirtyforms

The Plugin Monitior Your forms changes and alert before leaving the Page

The Best Part "It will not dispaly the alert Box when you click on Submit Button" OR You Submit your Form

Example Code:- 

<!DOCTYPE html>
 <html>
  <head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.dirtyforms/2.0.0-beta00006/jquery.dirtyforms.min.js"></script>

  <script type="text/javascript">
    $(function() {
        $('#form_verify').dirtyForms();
    })
  </script>

  <title></title>
 <body>
<form id="form_verify" action="a.php" method="POST">
    Firt Name <input type="text">
    Last Name <input type="file">
    <input type="submit">   
</form>

Upvotes: 1

Brent White
Brent White

Reputation: 431

you can use .on() to bind onbeforeunload and then use .off() to unbind it in form submission, short and sweet

$(document).ready(function () {
    $(window).on('beforeunload', function(){
        return "You have unsaved changes!";
    });
    $(document).on("submit", "form", function(event){
        $(window).off('beforeunload');
    });
}

Upvotes: 5

suraj jain
suraj jain

Reputation: 1032

Modified it : now ignores form submission 

$(document).ready(function () {
var warn_on_unload = "";
$('input:text,textarea').on('change', function () {
    warn_on_unload = "Leaving this page will cause any unsaved data to be lost.";
    $("form").submit(function () {
        warn_on_unload = "";
    });
    window.onbeforeunload = function () {
        if (warn_on_unload != '') {
            return warn_on_unload;
        }
    }
});
});

Upvotes: 3

ASD
ASD

Reputation: 4967

Here is the final code:

$(document).ready(function() 
{
    var warn_on_unload="";
    $('input:text,input:checkbox,input:radio,textarea,select').one('change', function() 
    {
        warn_on_unload = "Leaving this page will cause any unsaved data to be lost.";

        $('#submit').click(function(e) { 
            warn_on_unload = "";}); 

            window.onbeforeunload = function() { 
            if(warn_on_unload != ''){
                return warn_on_unload;
            }   
        }
    });
});

Upvotes: 7

Pekka
Pekka

Reputation: 449843

You can't prevent the calling of unbeforeunload, but using a global flag variable, you can control whether it displays a warning.

in the document, add the script:

warn_on_unload = "You have unsaved changes!"

in the submit event, add:

warn_on_unload = "";

the definition of the event, change to:

window.onbeforeunload = function() { return warn_on_unload; }

through warn_on_unload, you can now switch the warning message on or off at will.

Upvotes: 8

Related Questions