Confirm to leave the page when editing a form with jQuery

Question

I am coding a form and I need a function like stackoverflow have: "You have started writing or editing a post.".

I've looked through the code of stackoverflow to see how they do it but I don't get it at all to apply to my simple form. This is what they have on question.js:

function initNavPrevention(b) {
    if (b.which == "undefined") {
        return
    }
    var a = $("#wmd-input");
    a.unbind("keypress", initNavPrevention);
    setConfirmUnload("You have started writing or editing a post.", a)
}

One of the functions triggers this (I don't know what c is):

if (c) {
    e.keypress(initNavPrevention)
}

And finally they have setConfirmUnload(null); to disable it I suppose.

My case is simple. I have a page where I load a <form /> via AJAX and I want to prevent when this form is loaded to leave the page without click on the SUBMIT button or if the user clicks CANCEL the form is disabled and the prevention will not popup.

Having this code, can someone tell me how I can include it on my website?

This is my AJAX function to load the form:

$("#projects_historics_edit_part_1").click(function(){
    $("#ajax-loader").fadeIn('normal');

    $.ajax({
        url: BASE_URL + 'projects/ajax/get_historics_edit_part_1/' + PROJECT_ID,
        type: "POST",
        success: function(data) {
            $("div#projects_historics_part_1").html(data);

            $("#client").autocomplete(client_autcomplete_options);

            var inicofin = $("#initdate, #findate").datepicker(initdate_datepicker_options);
        }
    });

    $("#ajax-loader").fadeOut("normal");

    return false;    
});

Thank you in advance!

Answer 1

You can do this using window.onbeforeunload like this:

window.onbeforeunload = function() {
    return 'Are you sure you want to navigate away from this page?';
};

So in your code, you would put that inside the success callback of your $.ajax call.

To unset the confirmation, you can do this:

window.onbeforeunload = null;

Also, see this answer: How can I override the OnBeforeUnload dialog and replace it with my own?

Answer 2

This is how in 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 box not.
});

You can Google JQuery Form Serialize function, this will collect all form inputs and save it in array. I guess this explain is enough :)

Answer 3

I made a general function for this based on Wasim's excellent answer:

var confirm_nav_ignore = [];
function confirm_nav() {
    function save_form_state($form) {
        var old_state = $form.serialize();
        $form.data('old_state', old_state);
    }

    // On load, save form current state
    $('form').each(function() {
        save_form_state($(this));
    });

    // On submit, save form current state
    $('form').submit(function() {
        save_form_state($(this));
    });

    // strip fields that we should ignore
    function strip(form_data) {
        for (var i=0; i<confirm_nav_ignore.length; i++) {
            var field = confirm_nav_ignore[i];
            form_data = form_data.replace(new RegExp("\\b"+field+"=[^&]*"), '');
        }   
        return form_data;
    }

    // Before unload, confirm navigation if any field has been edited
    $(window).on('beforeunload', function(e) {
        var rv;
        $('form').each(function() {
            var $form = $(this);
            var old_state = strip($form.data('old_state'));
            var new_state = strip($form.serialize());
            if (new_state != old_state) {
                rv = '';
            }   
        }); 
        return rv;
    }); 
}

// I call it at the end of the on-load handler:
$(function() {
    confirm_nav();
});

Changes:

1. Allows to submit a form without confirmation.
2. Works with multiple forms, using $('form').each(...)
3. Does not depend on the form having id="form"
4. Returns '' as the custom confirmation message, instead of true which displays "true" in Chrome.
5. For difficult pages, it can be told to ignore certain form fields.
6. Run it from the end of the on-load handler... seems like a good idea.
7. It's generic enough, so we can use it on every page in a site.

It might look over-engineered, but that's what I had to do to make it work correctly in a real web app.

Thanks to Wasim, for the great idea to use JQuery $(form).serialize().

Answer 4

Based on Wasim A. answer. That code snipped looks great, but if I clicked to submit button I have an notification too. I think this is better:

$(document).ready(function() {
    let form = $('#form');
    form.data('serialize', form.serialize());
    
    // if submit clicked - pass user to save form
    form.find('submit').on('click', function () {
        $(window).off('beforeunload');
    });
});



  // On load save form current state

$(window).bind('beforeunload', function(e){
    let form = $('#form');
    if(form.serialize() !== form.data('serialize')) {
      return true;
    } else {
    // i.e; if form state change show box not.
      e=null;
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 5

small optimization of excellent Sam's answer:

var confirm_nav_ignore = [];
function confirm_nav() {
    var $forms = $('form'); // if you need it add .filter('#your_form_id');

    function save_form_state() {
        var $form = $(this),
            old_state = $form.serialize();
        $form.data('old_state', old_state);
    }

    $forms
        // On load, save form current state
        .each(save_form_state)
        // On submit, save form current state
        .submit(save_form_state)
    ;

    // strip fields that we should ignore
    function strip(form_data) {
        for (var i = 0; i < confirm_nav_ignore.length; i++) {
            var field = confirm_nav_ignore[i];
            form_data = form_data.replace(new RegExp("\\b" + field + "=[^&]*"), '');
        }

        return form_data;
    }

    // Before unload, confirm navigation if any field has been edited
    $(window).on('beforeunload', function(e) {
        var rv = undefined;

        $forms.each(function() {
            var $form = $(this);
            var old_state = strip($form.data('old_state'));
            var new_state = strip($form.serialize());
            if (new_state !== old_state) {
                e.preventDefault();
                rv = '';
            }
        });

        return rv;
    });
}
// I call it at the end of the on-load handler:
$(confirm_nav);

tested on last chrome, firefox and safari