confirm user on page refresh while form is open

Question

Hope you all are doing fine.

Scenario:

User has a form opened to be filled up. Now he clicks a link to another page or hits refresh or tries to close the page by clicking (x) on corresponding tab.

Problem:

Now, I need to ask the user if he intentional tried to leave the form page or that was a mistake (Are you sure to leave???? - Yes-confirm | NO-cancel)

I have tried onbeforeunload but its still not helping.

Here is what I could develop so far.

$(window).on('beforeunload', function(e){
    formContainer =  $('#resume_form_container');
    itemContainer = $('.item_container');
    e.preventDefault();

    //  discard drafts on page refresh against any opened form
    formContentConatinerLength =  $(formContainer).html().trim().length;
    itemContainerLength = $(itemContainer.length);

    //  there is a model opened for processing
    //  against resume basics | any section instance
    if(formContentConatinerLength > 0 || itemContainerLength > 0) {

        bootbox.confirm({
            message: 'Are sure??',
            size: 'small',
            backdrop: true,
            buttons: {
                confirm: {
                    label: 'ok',
                    className: 'btn-primary'
                },
                cancel: {
                    label: 'Cancel',
                    className: 'btn-default'
                }
            },
            callback: function (result) {
                if(result)  //  case: Remove All Draft Attachments Confirmed
                {
                    $('#close_model').click();
                    return true;
                }
                else    //  case: cancel all draft attachments removal
                {
                    return false;
                    //  console.log('This was logged in the callback: ' + result);
                }
            }
        });
    }
});

As Output: I just see bootbox prompt just form say 10 milliseconds (it comes and goes instantly) but nothing further. NO statements get executed. I have nothing in console and page reloads. If I click cancel, still my page reloads.

Note: If user says yes|confirm, I am going to do a few activities to remove all the traces of what he did with my form. Also, I want to ask end user about confirmation only when a form is opened

Any help is appreciated.

Stay Blessed.

Answer 1

Most browser developers have added security that prevents nefarious coders from using their own pop ups of this type as you could prevent a user from ever leaving your site.

When using "onbeforeUnload" your function should return a string that will appear in a dialog window i.e. -

$(window).on('beforeunload', function(e){
    formContentConatinerLength =  $(formContainer).html().trim().length;
    itemContainerLength = $(itemContainer.length);

    //  there is a model opened for processing
    //  against resume basics | any section instance
    if(formContentConatinerLength > 0 || itemContainerLength > 0) {
        return "Are you sure you want to leave?";
});

For more information on this take a look at the Mozilla Developer Network.

To handle the user having confirmed that they did indeed wish to leave the page you could make use of the "onunload" event which happens after the page is unloaded (and therefore after "beforeunload"). Something like -

$(window).on('unload', function(e){
    //remove all the traces of what the user did with the form
});

Answer 2

You can use addEventListener event will fire when a user tries to navigate away. However, if you use a DIV as a pop-up the browser will navigate away before the user has a chance to read it.

To keep them there you'd have to use a alert/prompt/confirm dialog boxes. (as far as I know)

Sample Code :

$(window).addEventListener('beforeunload', function(e){
formContainer =  $('#resume_form_container');
itemContainer = $('.item_container');
e.preventDefault();

//  discard drafts on page refresh against any opened form
formContentConatinerLength =  $(formContainer).html().trim().length;
itemContainerLength = $(itemContainer.length);

//  there is a model opened for processing
//  against resume basics | any section instance
if(formContentConatinerLength > 0 || itemContainerLength > 0) {

    bootbox.confirm({
        message: 'Are sure??',
        size: 'small',
        backdrop: true,
        buttons: {
            confirm: {
                label: 'ok',
                className: 'btn-primary'
            },
            cancel: {
                label: 'Cancel',
                className: 'btn-default'
            }
        },
        callback: function (result) {
            if(result)  //  case: Remove All Draft Attachments Confirmed
            {
                $('#close_model').click();
                return true;
            }
            else    //  case: cancel all draft attachments removal
            {
                return false;
                //  console.log('This was logged in the callback: ' + result);
            }
        }
    });
}
});