Display a warning with 'onbeforeunload' when leaving a page, except if 'Submit' is clicked

Question

I wish to display a warning if a user attepmts to leave a page that contains unsaved settings, but obviously not if they are attempting to save those settings.

I guess my understanding is wrong, as I thought the below should work, but it does not. Can somebody tell me what I am doing wrong? Thanks.

$('input[name="Submit"]').off('onbeforeunload');

window.onbeforeunload = function closeEditorWarning(){

    /** Check to see if the settings warning is displayed */
    if($('#unsaved-settings').css('display') !== 'none'){
        bol_option_changed = true;
    }

    /** Display a warning if the user is trying to leave the page with unsaved settings */
    if(bol_option_changed === true){
        return '';
    }


};

score 18 · Answer 1 · answered Aug 26 '14 at 16:59

18

you could use jquery .on() to set onbeforeunload and then use .off() in form submission

// Warning
$(window).on('beforeunload', function(){
    return "Any changes will be lost";
});

// Form Submit
$(document).on("submit", "form", function(event){
    // disable unload warning
    $(window).off('beforeunload');
});

answered Aug 26 '14 at 16:59

Brent White

411
5
4

1

Excellent answer. Easier than setting a flag. – Moe Mar 15 '15 at 09:28
So I implemented this solution and it worked great. But Chrome just released an update that changes the way the beforeunload is handled. It no longer supports custom messages. Also if you return anything including "false" it will display the message. So my real solution was a combination of this and removing my "return false" at the end of my function. – danielson317 Oct 06 '16 at 13:42

score 5 · Accepted Answer · edited May 06 '20 at 15:45

5

you can try this: set a flag when submit button is clicked and use this flag to check if the user has clicked submitted or leaving the page halfway

Pseudo code:

var submit_clicked = false;

$('input[type="submit"]').click(function(){
    submit_clicked = true;
});


window.onbeforeunload = function closeEditorWarning () {

  /** Check to see if the settings warning is displayed */
  if(($('#unsaved-settings').css('display') !== 'none') && 
      submit_clicked === false) {
    bol_option_changed = true;
  }

  /** Display a warning if the user is trying to leave the page with unsaved settings */
  if(bol_option_changed === true){
    return '';
  }


};

edited May 06 '20 at 15:45

MichaelJC

3
3

answered Jan 15 '13 at 15:59

palerdot

7,416
5
41
47

Good thought, but sadly it's not working. The click is being picked up first, but the warning is still being displayed. Thanks. – David Gard Jan 15 '13 at 16:21
I needed to add `var bol_option_changed = false;` to the `onbeforeunload` function, so it's all working now. Thanks. – David Gard Jan 15 '13 at 16:56

JZhang · Answer 3 · 2015-04-29T19:03:36.623

I encountered this problem so I would like to share my solution.

Brent White's solution does not work for me because I use the jQuery-validation plugin. It means that if the users provide invalid input, even after they click the submit button, they will still stay at the page. At this moment, if they leave or refresh the page, the alert message will not shown.

$(window).bind('beforeunload', function(evt) {
  var isSubmitButton = (evt.srcElement.activeElement.type === "submit");
  var isModified = ($form.data("isModified") === true); 
  if ( !isSubmitButton && isModified) {
    return "You need to save your changes before you leave the page";
  } 
});

curiosity · Answer 4 · 2018-07-28T09:46:46.453

Here is the perfect answer for your question.

document.querySelector('.send').addEventListener("click", function(){ // put a class="send" in submit button
    window.btn_clicked = true; // if it is click onbeforeunload will not add dialog anymore
});
window.onbeforeunload = function(){

      if(!window.btn_clicked){
          var lot = $('#lot_no').val(); //getting values from form
      if(!lot == ''){  //checking if it is not empty
        return 'Changes you made not be saved!';
      }

      }


};

Display a warning with 'onbeforeunload' when leaving a page, except if 'Submit' is clicked

4 Answers4

Linked