'Warning user before closing or leaving page with unsaved changes' doesn't work

Question

First of all, I am new to Javascript and Jquery. I need a function that warns user before leaving page with unsaved changes. I know that similar questions have been issued before but I could never get the page display message when I apply method mentioned in threads. Following question is most popular in the field, so I have mostly exploited methods from the thread:

Warn user before leaving web page with unsaved changes

Here is what I got in my page:

    <gt-form:form commandName="manager" method="GET" id="managerForm" name="managerForm">

    //Form fields,buttons
    </gt-form:form>

    <script>
        var formSubmitting = false;
        var setFormSubmitting = function() {
            debugger;
            formSubmitting = true;
        };
    </script>

    <script>

        window.onload = function() {
            window.addEventListener("beforeunload", function(e) {
                var confirmationMessage = 'It looks like you have been editing something. ';
                confirmationMessage += 'If you leave before saving, your changes will be lost.';

                if (formSubmitting || !isDirty()) {
                    return undefined;
                }

                (e || window.event).returnValue = confirmationMessage; //Gecko + IE
                return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
            });
        };
    </script>

    <script>
    $('#managerForm').data('serialize',$('#managerForm').serialize()); // On load save form current state

    var isDirty = function() { $(window).bind('beforeunload', function(e){
        if($('#managerForm').serialize()!=$('#managerForm').data('serialize')) isDirty=true;
        else e=null; // i.e; if form state change show warning box, else don't show it.
    }); };
    </script>

What am I doing wrong?

Yes,that worked! Thanks! The only thing I have to do was binding change events of the input fields to my form with form-id. — metzelder, Sep 18 '15 at 06:11

score 2 · Accepted Answer · answered Sep 18 '15 at 06:36

I have implemented that way, and it worked:

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.
        });
    });

The thing is to binding changed event of my form field with form-id.

score 0 · Answer 2 · answered Sep 16 '15 at 07:16

Try this:

        var formSubmitting = false;
        var setFormSubmitting = function() {
            debugger;
            formSubmitting = true;
        };

    window.onload = function() {
        window.addEventListener("beforeunload", function(e) {
            console.log('beforeunload');
            var confirmationMessage = 'It looks like you have been editing something. ';
            confirmationMessage += 'If you leave before saving, your changes will be lost.';
            var isDirty = false;
            //Here we are checking the condition
            if ($('#managerForm').serialize() != $('#managerForm').data('serialize')) isDirty = true;
            else e = null; // i.e; if form state change show warning box, else don't show it.


            if (formSubmitting || !isDirty) {
                return undefined;
            }

            (e || window.event).returnValue = confirmationMessage; //Gecko + IE
            return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
        });
    };

can u share us example in jsfildle or etc... – jayapal Sep 16 '15 at 07:44 — jayapal, Sep 16 '15 at 07:44

arun bahal · Answer 3 · 2015-09-18T05:28:05.910

0

$(function(){
 $('#myForm').data('serialize',$('#myForm').serialize()); 
 $(window).bind('beforeunload', function(e){
  console.log($('#myForm').serialize(), $('#myForm').data('serialize'));
  if($('#myForm').serialize()!=$('#myForm').data('serialize'))
   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.
 });
});
function saveData() {
 $('#myForm').data('serialize',$('#myForm').serialize());
 // and save the same in your database through ajax call. So that you won't have prompt once you save the data
}

<form id="myForm" name="myForm" action="" method="post" onsubmit="return saveData();">
  <input type="text" name="firstName" />
  <input type="text" name="lastName" />
  <select name="myOptions">
 <option value="">--Select--</option>
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="mercedes">Mercedes</option>
 <option value="audi">Audi</option>
 </select>
  <input type="submit" value="Submit"/>
</form>

edited Sep 18 '15 at 05:28

answered Sep 16 '15 at 10:33

arun bahal

328
3
13

It displays warning even if I don't change anything. – metzelder Sep 16 '15 at 12:33
I have checked in both FF and Chrome, It works fine for me. Could you share your code in jsfiddle? – arun bahal Sep 16 '15 at 13:11
https://jsfiddle.net/mqtuxuap/ – metzelder Sep 16 '15 at 13:23
I realized that it didn't get the combobox value on page leaving. Why could it be? – metzelder Sep 16 '15 at 13:43
I have edited my html markup adding a select box, that works fine for me. Please check above code and make sure if your select box markup is generated before document ready fires. – arun bahal Sep 18 '15 at 05:30

'Warning user before closing or leaving page with unsaved changes' doesn't work

3 Answers3