How to show the Are you sure you want to navigate away from this page when changes committed

Question

Here in stackoverflow  if you started to make changes then you attempt to navigate away from the page  a javascript confirm button shows up and asks   Are you sure you want to navigate away from this page   blee blah bloo     Has anyone implemented this before  how do I track that changes were committed  I believe I could do this myself  I am trying to learn the good practices from you the experts   I tried the following but still doesn t work    lt html gt   lt body gt       lt p gt Close the page to trigger the onunload event  lt  p gt       lt script type  text javascript  gt          var changes   false                  window onbeforeunload   function                 if  changes                                var message    Are you sure you want to navigate away from this page  n nYou have started writing or editing a post  n nPress OK to continue or Cancel to stay on the current page                    if  confirm message   return true                  else return false                               lt  script gt        lt input type  text  onchange  changes true   gt   lt  input gt   lt  body gt   lt  html gt    Can anyone post an example

User · Accepted Answer

Update  2017   Modern browsers now consider displaying a custom message to be a security hazard and it has therefore been removed from all of them  Browsers now only display generic messages  Since we no longer have to worry about setting the message  it is as simple as      Enable navigation prompt window onbeforeunload   function         return true        Remove navigation prompt window onbeforeunload   null    Read below for legacy browser support   Update  2013   The orginal answer is suitable for IE6-8 and FX1-3 5  which is what we were targeting back in 2009 when it was written   but is rather out of date now and won t work in most current browsers - I ve left it below for reference   The window onbeforeunload is not treated consistently by all browsers  It should be a function reference and not a string  as the original answer stated  but that will work in older browsers because the check for most of them appears to be whether anything is assigned to onbeforeunload  including a function that returns null    You set window onbeforeunload to a function reference  but in older browsers you have to set the returnValue of the event instead of just returning a string   var confirmOnPageExit   function  e            If we haven t been passed the event get the window event     e   e    window event       var message    Any text will block the navigation and display a prompt           For IE6-8 and Firefox prior to version 4     if  e                 e returnValue   message                For Chrome  Safari  IE8  and Opera 12      return message       You can t have that confirmOnPageExit do the check and return null if you want the user to continue without the message  You still need to remove the event to reliably turn it on and off      Turn it on - assign the function that returns the string window onbeforeunload   confirmOnPageExit      Turn it off - remove the function entirely window onbeforeunload   null    Original answer  worked in 2009   To turn it on   window onbeforeunload    Are you sure you want to leave      To turn it off   window onbeforeunload   null    Bear in mind that this isn t a normal event - you can t bind to it in the standard way   To check for values  That depends on your validation framework   In jQuery this could be something like  very basic example       input   change function         if    this  val                   window onbeforeunload    Are you sure you want to leave

User · Answer

There is an  onunload  parameter for the body tag you can call javascript functions from there  If it returns false it prevents navigating away

User · Answer

To expand on Keith s already amazing answer   Custom warning messages  To allow custom warning messages  you can wrap it in a function like this   function preventNavigation message        var confirmOnPageExit   function  e               If we haven t been passed the event get the window event         e   e    window event              For IE6-8 and Firefox prior to version 4         if  e                        e returnValue   message                        For Chrome  Safari  IE8  and Opera 12          return message             window onbeforeunload   confirmOnPageExit      Then just call that function with your custom message   preventNavigation  Baby  please don t go         Enabling navigation again  To re-enable navigation  all you need to do is set window onbeforeunload to null  Here it is  wrapped in a neat little function that can be called anywhere   function enableNavigation         window onbeforeunload   null      Using jQuery to bind this to form elements  If using jQuery  this can easily be bound to all of the elements of a form like this       yourForm  input   change function         preventNavigation  You have not saved the form  Any           changes will be lost if you leave this page           Then to allow the form to be submitted       yourForm   on  submit   function event        enableNavigation          Dynamically-modified forms   preventNavigation   and enableNavigation   can be bound to any other functions as needed  such as dynamically modifying a form  or clicking on a button that sends an AJAX request  I did this by adding a hidden input element to the form    lt input id  dummy input  type  hidden    gt    Then any time I want to prevent the user from navigating away  I trigger the change on that input to make sure that preventNavigation   gets executed   function somethingThatModifiesAFormDynamically             Do something that modifies a form                     dummy input   trigger  change

User · Answer

Based on all the answers on this thread  I wrote the following code and it worked for me     If you have only some input textarea tags which requires an onunload event to be checked  you can assign HTML5 data-attributes as data-onunload  true   for eg    lt input type  text  data-onunload  true    gt   lt textarea data-onunload  true  gt  lt  textarea gt    and the Javascript  jQuery  can look like this      document  ready function        window onbeforeunload   function e            var returnFlag   false             textarea  input   each function                if   this  attr  data-onunload       true   amp  amp    this  val                          returnFlag   true                       if returnFlag              return  Sure you want to leave

User · Answer

jquerys  beforeunload  worked great for me    window  bind  beforeunload   function        if     input   val                     return  It looks like you have input you haven t submitted

User · Answer

Here try this it works 100      lt html gt   lt body gt   lt script gt  var warning   true  window onbeforeunload   function         if  warning          return  You have made changes on this page that you have not yet confirmed  If you navigate away from this page you will lose your unsaved changes                   form   submit function        window onbeforeunload   null       lt  script gt   lt  body gt   lt  html gt

User · Answer

This is an easy way to present the message if any data is input into the form  and not to show the message if the form is submitted     function             input  textarea  select   on  input change   function             window onbeforeunload   window onbeforeunload    function  e                return  You have unsaved changes   Do you want to leave this page and lose your changes                              form   on  submit   function             window onbeforeunload   null

User · Answer

When the user starts making changes to the form  a boolean flag will be set  If the user then tries to navigate away from the page  you check that flag in the window onunload event  If the flag is set  you show the message by returning it as a string  Returning the message as a string will popup a confirmation dialog containing your message   If you are using ajax to commit the changes  you can set the flag to false after the changes have been committed  i e  in the ajax success event

User · Answer

The onbeforeunload Microsoft-ism is the closest thing we have to a standard solution  but be aware that browser support is uneven  e g  for Opera it only works in version 12 and later  still in beta as of this writing    Also  for maximum compatibility  you need to do more than simply return a string  as explained on the Mozilla Developer Network   Example  Define the following two functions for enabling disabling the navigation prompt  cf  the MDN example    function enableBeforeUnload         window onbeforeunload   function  e            return  Discard changes             function disableBeforeUnload         window onbeforeunload   null      Then define a form like this    lt form method  POST  action    onsubmit  disableBeforeUnload     gt       lt textarea name  text                onchange  enableBeforeUnload                   onkeyup  enableBeforeUnload     gt       lt  textarea gt       lt button type  submit  gt Save lt  button gt   lt  form gt    This way  the user will only be warned about navigating away if he has changed the text area  and will not be prompted when he s actually submitting the form

User · Answer

for new people who is looking for a simple solution  just try Areyousure js

User · Answer

here is my html     lt  DOCTYPE HMTL gt   lt meta charset  UTF-8  gt   lt html gt   lt head gt   lt title gt Home lt  title gt   lt script type  text javascript  src  script js  gt  lt  script gt   lt  head gt     lt body onload  myFunction    gt       lt h1 id  belong  gt          Welcome To My Home      lt  h1 gt       lt p gt           lt a id  replaceME  onclick  myFunction2 event   href  https   www ccis edu  gt I am a student at Columbia College of Missouri  lt  a gt       lt  p gt   lt  body gt      And so this is how I did something similar in javaScript  var myGlobalNameHolder       function myFunction    var myString   prompt  Enter a name    Name Goes Here        myGlobalNameHolder   myString      if  myString    null            document getElementById  replaceME   innerHTML            Hello     myString      Welcome to my site            document getElementById  belong   innerHTML            A place you belong                  create a function to pass our event too function myFunction2 event          variable to make our event short and sweet var x window onbeforeunload     logic to make the confirm and alert boxes if  confirm  Are you sure you want to leave my page       true        x   alert  Thank you     myGlobalNameHolder     for visiting

User · Answer

The standard states that prompting can be controlled by canceling the beforeunload event or setting the return value to a non-null value  It also states that authors should use Event preventDefault   instead of returnValue  and the message shown to the user is not customizable   As of 69 0 3497 92  Chrome has not met the standard  However  there is a bug report filed  and a review is in progress  Chrome requires returnValue to be set by reference to the event object  not the value returned by the handler   It is the author s responsibility to track whether changes have been made  it can be done with a variable or by ensuring the event is only handled when necessary    x000D   x000D  window addEventListener  beforeunload   function  e    x000D         Cancel the event as stated by the standard  x000D      e preventDefault    x000D         Chrome requires returnValue to be set  x000D      e returnValue       x000D      x000D       x000D  window location    about blank   x000D   x000D   x000D

User · Answer

What you want to use is the onunload event in JavaScript   Here is an example  http   www w3schools com jsref event onunload asp

User · Answer

You can add an onchange event on the textarea  or any other fields  that set a variable in JS  When the user attempts to close the page  window onunload  you check the value of that variable and show the alert accordingly

User · Answer

It can be easily done by setting a ChangeFlag to true  on onChange event of TextArea  Use javascript to show confirm dialog box based on the ChangeFlag value  Discard the form and navigate to requested page if confirm returns true  else do-nothing

User · Answer

To make this work in Chrome and Safari  you would have to do it like this  window onbeforeunload   function e        return  Sure you want to leave         Reference  https   developer mozilla org en DOM window onbeforeunload

User · Answer

With JQuery this stuff is pretty easy to do  Since you can bind to sets    Its NOT enough to do the onbeforeunload  you want to only trigger the navigate away if someone started editing stuff

[javascript] How to show the "Are you sure you want to navigate away from this page?" when changes committed?

Update (2017)

Update (2013)

Original answer (worked in 2009)

Examples related to javascript

Examples related to html

Examples related to message

Examples related to onbeforeunload

Examples related to confirm