Warn user before leaving web page with unsaved changes

Question

I have some pages with forms in my application    How can I secure the form in such a way that if someone navigates away or closes the browser tab  they should be prompted to to confirm they really want to leave the form with unsaved data

User · Answer

Check out the JavaScript onbeforeunload event   It s non-standard JavaScript introduced by Microsoft  however it works in most browsers and their onbeforeunload documentation has more information and examples

User · Answer

I did it differently  sharing here so that someone can get help  tested only with Chrome   I wanted to warn user before closing the tab only if there are some changes    lt input type  text  name  field  value    class  onchange    gt   var ischanged   false       onchange   change function          ischanged   true       window onbeforeunload   function  e        if  ischanged            return  Make sure to save all changes                       Works good  but got an-other issue  when i submit the form i get the unwanted warning  i saw lots of workaround on it  this is because onbeforeunload fires before onsubmit thats why we can t handle it in onsubmit event like onbeforeunload   null  but onclick event of submit button fires before these both events  so i updated the code  var isChanged   false  var isSubmit   false   window onbeforeunload   function  e        if  isChanged  amp  amp    isSubmit             return  Make sure to save all changes                          submitbutton   click function          isSubmit   true           onchange   change function          isChanged   true

User · Answer

First of all  most browsers has this function by default  And why do you need this at all  Why not to keep the form synced  I mean  save it on any change without waiting any submitting from user  Like Google Contacts do  Of course if only all fields in form are mandatory  Users do not like when them force to fill something up without the opportunity to go away to think if they need it

User · Answer

You could check for a detailed explanation here  http   techinvestigations redexp in comparison-of-form-values-on-load-and-before-close  comparison-of-form-values-on-load-and-before-close  The main code   function formCompare defaultValues  valuesOnClose            Create arrays of property names     var aPropsFormLoad   Object keys defaultValues       var aPropsFormClose   Object keys valuesOnClose           If number of properties is different         objects are not equivalent     if  aPropsFormLoad length    aPropsFormClose length            return false             for  var i   0  i  lt  aPropsFormLoad length  i              var propName   aPropsFormLoad i               If values of same property are not equal             objects are not equivalent         if  defaultValues aPropsFormLoad         valuesOnClose aPropsFormLoad                    return false                          If we made it this far  objects        are considered equivalent     return true        add polyfill for older browsers  as explained on the link above    use the block below on load     for i 0  i  lt  document forms 0  elements length  i         console log  The field name is      document forms 0  elements i  name             and it   s value is      document forms 0  elements i  value        aPropsFormLoad i    document forms 0  elements i  value           create a similar array on window unload event     and call the utility function     if   formCompare aPropsOnLoad  aPropsOnClose               perform action         ask user for confirmation or       display message about changes made

User · Answer

You can use serialize   to create a URL encoded text string by serializing form values and check whether the form has changed beforeunload    document  ready function        var form       some-form            original   form serialize        form submit function            window onbeforeunload   null             window onbeforeunload   function            if  form serialize      original              return  Are you sure you want to leave              Refer this link https   coderwall com p gny70a alert-when-leaving-page-with-unsaved-form Written by Vladimir Sidorenko

User · Answer

Adding to te idea of  codecaster you could add this to every page with a form  in my case i use it in global way so only on forms would have this warn  change his function to  if   formSubmitting    document getElementsByTagName  form   length    0     Also put on forms submit including login and in cancel buttons links so when person press cancel or submit the form won t trigger the warn also in every page witouth a form      lt a class  btn btn-danger btn-md  href  back url  onclick  setFormSubmitting    gt Cancel lt  a gt

User · Answer

Tested Eli Grey s universal solution  only worked after I simplified the code to     use strict           gt        const modified inputs   new Set        const defaultValue    defaultValue          store default values     addEventListener  beforeinput   evt   gt          const target   evt target        if    defaultValue in target dataset             target dataset defaultValue           target value    target textContent   trim                            detect input modifications     addEventListener  input   evt   gt          const target   evt target        let original   target dataset defaultValue          let current          target value    target textContent   trim           if  original     current            if   modified inputs has target               modified inputs add target                     else if  modified inputs has target             modified inputs delete target                        addEventListener         saved         function e            modified inputs clear                  false             addEventListener  beforeunload   evt   gt          if  modified inputs size            const unsaved changes warning    Changes you made may not be saved            evt returnValue   unsaved changes warning          return unsaved changes warning                             The modifications to his is deleted the usage of target defaultValue  and only use target dataset defaultValue  to store the real default value   And I added a  saved  event listener where the  saved  event will be triggered by yourself on your saving action succeeded   But this  universal  solution only works in browsers  not works in app s webview  for example  wechat browsers   To make it work in wechat browsers partially  also  another improvements again      use strict           gt        const modified inputs   new Set        const defaultValue    defaultValue          store default values     addEventListener  beforeinput   evt   gt          const target   evt target        if    defaultValue in target dataset             target dataset defaultValue           target value    target textContent   trim                            detect input modifications     addEventListener  input   evt   gt          const target   evt target        let original   target dataset defaultValue          let current          target value    target textContent   trim           if  original     current            if   modified inputs has target               modified inputs add target                     else if  modified inputs has target             modified inputs delete target                  if modified inputs size           const event   new Event  needSave           window dispatchEvent event                        addEventListener         saved         function e            modified inputs clear                  false             addEventListener  beforeunload   evt   gt          if  modified inputs size            const unsaved changes warning    Changes you made may not be saved            evt returnValue   unsaved changes warning          return unsaved changes warning                       const ua   navigator userAgent toLowerCase         if  MicroMessenger i test ua           let pushed   false        addEventListener  needSave   evt   gt            if  pushed              pushHistory               window addEventListener  popstate   function e                if modified inputs size                  var cfi   confirm                 JSON stringify e                  if  cfi                    modified inputs clear                   history go -1                 else                  e preventDefault                    e stopPropagation                                               false                      pushed   true                      function pushHistory           var state             title  document title          url    flag                 window history pushState state  document title    flag

User · Answer

via jquery      form   data  serialize      form   serialize        On load save form current state    window  bind  beforeunload   function e       if     form   serialize        form   data  serialize   return true      else e null     i e  if form state change show warning box  else don t show it        You can Google JQuery Form Serialize function  this will collect all form inputs and save it in array   I guess this explain is enough

User · Answer

Based on the previous answers  and cobbled together from various places in stack overflow  here is the solution I came up with which handles the case when you actually want to submit your changes   window thisPage   window thisPage        window thisPage isDirty   false   window thisPage closeEditorWarning   function  event        if  window thisPage isDirty          return  It looks like you have been editing something                     - if you leave before saving  then your changes will be lost       else         return undefined         form   on  keyup    textarea      You can use input type text  here as well               function                        window thisPage isDirty   true                        form   submit function          QC thisPage isDirty   false      window onbeforeunload   window thisPage closeEditorWarning    It s worth noting that IE11 seems to require that the closeEditorWarning function returns undefined for it not to show an alert

User · Answer

The following one-liner has worked for me   window onbeforeunload   s   gt  modified        null    Just set modified to true or false depending on the state of your application

User · Answer

var unsaved   false      input   change function                   unsaved   true       function unloadPage                  if  unsaved                         alert  You have unsaved changes on this page  Do you want to leave this page and discard your changes or stay on this page              window onbeforeunload   unloadPage

User · Answer

Short  wrong answer   You can do this by handling the beforeunload event and returning a non-null string   window addEventListener  beforeunload   function  e        var confirmationMessage    It looks like you have been editing something                                   If you leave before saving  your changes will be lost          e    window event  returnValue   confirmationMessage    Gecko   IE     return confirmationMessage    Gecko   Webkit  Safari  Chrome etc        The problem with this approach is that submitting a form is also firing the unload event  This is fixed easily by adding the a flag that you re submitting a form   var formSubmitting   false  var setFormSubmitting   function     formSubmitting   true      window onload   function         window addEventListener  beforeunload   function  e            if  formSubmitting                return undefined                     var confirmationMessage    It looks like you have been editing something                                       If you leave before saving  your changes will be lost              e    window event  returnValue   confirmationMessage    Gecko   IE         return confirmationMessage    Gecko   Webkit  Safari  Chrome etc               Then calling the setter when submitting    lt form method  post  onsubmit  setFormSubmitting    gt            lt input type  submit    gt   lt  form gt    But read on     Long  correct answer   You also don t want to show this message when the user hasn t changed anything on your forms  One solution is to use the beforeunload event in combination with a  dirty  flag  which only triggers the prompt if it s really relevant    var isDirty   function     return false     window onload   function         window addEventListener  beforeunload   function  e            if  formSubmitting     isDirty                  return undefined                     var confirmationMessage    It looks like you have been editing something                                       If you leave before saving  your changes will be lost              e    window event  returnValue   confirmationMessage    Gecko   IE         return confirmationMessage    Gecko   Webkit  Safari  Chrome etc               Now to implement the isDirty method  there are various approaches    You can use jQuery and form serialization  but this approach has some flaws  First you have to alter the code to work on any form     form   each   will do   but the greatest problem is that jQuery s serialize   will only work on named  non-disabled elements  so changing any disabled or unnamed element will not trigger the dirty flag  There are workarounds for that  like making controls readonly instead of enabling  serializing and then disabling the controls again   So events seem the way to go  You can try listening for keypresses  This event has a few issues    Won t trigger on checkboxes  radio buttons  or other elements that are being altered through mouse input  Will trigger for irrelevant keypresses like the Ctrl key  Won t trigger on values set through JavaScript code  Won t trigger on cutting or pasting text through context menus  Won t work for virtual inputs like datepickers or checkbox radiobutton beautifiers which save their value in a hidden input through JavaScript    The change event also doesn t trigger on values set from JavaScript code  so also won t work for virtual inputs    Binding the input event to all inputs  and textareas and selects  on your page won t work on older browsers and  like all event handling solutions mentioned above  doesn t support undo  When a user changes a textbox and then undoes that  or checks and unchecks a checkbox  the form is still considered dirty   And when you want to implement more behavior  like ignoring certain elements  you ll have even more work to do   Don t reinvent the wheel   So before you think about implementing those solutions and all required  workarounds  realize you re reinventing the wheel and you re prone to running into problems others have already solved for you    If your application already uses jQuery  you may as well use tested  maintained code instead of rolling your own  and use a third-part library for all of this  jQuery s Are You Sure  plugin works great  see their demo page  It s as simple as this    lt script src  jquery are-you-sure js  gt  lt  script gt    lt script gt      function             myForm   areYouSure                  message   It looks like you have been editing something                      If you leave before saving  your changes will be lost                          lt  script gt    Custom messages not supported everywhere  Do note that Firefox 4 didn t support custom messages in this dialog  As of april 2016  Chrome 51 is being rolled out in which custom messages are also being removed    Some alternatives exist elsewhere on this site  but I think a dialog like this is clear enough      Do you want to leave this site       Changes you made may not be saved       Leave Stay

User · Answer

The solution by Eerik Sven Puudist      var isSubmitting   false     document  ready function             form   submit function            isSubmitting   true                form   data  initial-state      form   serialize            window  on  beforeunload   function             if   isSubmitting  amp  amp     form   serialize         form   data  initial-state                 return  You have unsaved changes which will not be saved                              spontaneously did the job for me in a complex object-oriented setting without any changes necessary   The only change I applied was to refer to the concrete form  only one form per file  called  formForm    form  -    formForm      lt form     id  formForm  name  formForm      gt    Especially well done is the fact that the submit button is being  left alone    Additionally  it works for me also with the lastest version of Firefox  as of February 7th  2019

User · Answer

Built on top of Wasim A  s excellent idea to use serialization  The problem there was that the warning was also shown when the form was being submitted  This has been fixed here   var isSubmitting   false    document  ready function             form   submit function            isSubmitting   true                form   data  initial-state      form   serialize            window  on  beforeunload   function             if   isSubmitting  amp  amp     form   serialize         form   data  initial-state                 return  You have unsaved changes which will not be saved                          It has been tested in Chrome and IE 11

User · Answer

Universal solution requiring no configuration that automatically detects all input modification  including contenteditable elements   quot use strict quot         gt    const modified inputs   new Set  const defaultValue    quot defaultValue quot      store default values addEventListener  quot beforeinput quot    evt    gt        const target   evt target      if    defaultValue in target    defaultValue in target dataset             target dataset defaultValue      quot  quot     target value    target textContent   trim                 detect input modifications addEventListener  quot input quot    evt    gt        const target   evt target      let original      if  defaultValue in target            original   target defaultValue         else           original   target dataset defaultValue             if  original       quot  quot     target value    target textContent   trim              if   modified inputs has target                 modified inputs add target                   else if  modified inputs has target             modified inputs delete target                clear modified inputs upon form submission addEventListener  quot submit quot        gt        modified inputs clear           to prevent the warning from happening  it is advisable        that you clear your form controls back to their default        state with form reset   after submission        warn before closing if any inputs are modified addEventListener  quot beforeunload quot    evt    gt        if  modified inputs size            const unsaved changes warning    quot Changes you made may not be saved  quot           evt returnValue   unsaved changes warning          return unsaved changes warning

User · Answer

Following code works great  You need to reach your form elements  input changes via id attribute     var somethingChanged false                  managerForm input   change function                      somethingChanged   true                                 window  bind  beforeunload   function e                   if somethingChanged                      return  You made some changes and it s not saved                    else                      e null     i e  if form state change show warning box  else don t show it

User · Answer

Short answer    let pageModified   true  window addEventListener  beforeunload           gt  pageModified    Close page without saving data     null

User · Answer

I made following code  It can compare changes in all fields  except those marked with  ignoreDirty class  or optionally for currently visible fields only  It can be reinitialized for new fields added by Javascript  From that reason I save not the form status but the status of each control     Dirty warning for forms    dirty    skipHiddenOrNullToInit    gt            will return True if there are changes in form s          for first initialization you can use both   dirty null  or  dirty    ignore its result               dirty null  will  re initialize all controls - in addititon use it after Save if you stay on same page              dirty   will initialize new controls - in addititon use it if you add new fields with JavaScript         then              dirty    or   dirty false   says if data are changed without regard to hidden fields              dirty true  says if data are changed with regard to hidden fields  ie  fields with  d-none or  hidden class          controls with  ignoreDirty class will be skipped always         previous about  d-none   hidden   ignoreDirty applies to the control itself and all its ancestors            let isDirty   false      let skipSelectors     ignoreDirty       if  skipHiddenOrNullToInit            skipSelectors        d-none   hidden        else if  skipHiddenOrNullToInit     undefined            skipHiddenOrNullToInit   false               input  select   each      function  idx  el            if    el  prop  type        hidden                 let dirtyInit     el  data  dirty-init                if  skipHiddenOrNullToInit     null    dirtyInit     undefined                    try                       isChromeAutofillEl     el  is  quot  -webkit-autofill quot                      catch  error                        isChromeAutofillEl   false                                    if  isChromeAutofillEl  amp  amp    el  data  dirty-init       undefined                        setTimeout function         otherwise problem with Chrome autofilled controls                           el  data  dirty-init     el  val                            200                    else                         el  data  dirty-init     el  val                                     else if    el  closest skipSelectors  length     0  amp  amp  dirtyInit       el  val                      isDirty   true                  return false     breaks jQuery  each                                          return isDirty     I have additional troubles with Chrome autofill values because it is difficult to initizialize and have them loaded already  So I do not initialize on page load but in any focusin event   But  Maybe there is still problem with control values changed by JavaScript   I use following code which I call at page load  let init dirty    ifStayFunc    gt            ifStayFunc  optional callback when user decides to stay on page     use  clearDirty class to avoid warning on some button  however          if the button fires JavaScript do t use  clearDirty class and instead             use directly dirty null  in code - to be sure it will run before window location           input  select   on  focusin   function evt            if      body   data  dirty initialized                  dirty                   body   data  dirty initialized   true                         window addEventListener  beforeunload    evt    gt            if  dirty true                 if  ifStayFunc                    ifStayFunc                              evt preventDefault                evt returnValue           at least Google Chrome requires this                           clearDirty   on  click   function evt            dirty null               So  I add the  clearDirty class to the buttons which provide Save and that way I prevent the warning in this case  Callback ifStayFunc allows me to do something if user will Stay on Page while he is warned  Typically I can show additional Save Button  if I have still visible only some default primary button  which makes Safe SomethingMore - and I want allow Save withou this  quot SomethingMore quot

[javascript] Warn user before leaving web page with unsaved changes

Examples related to javascript

Examples related to forms