Privacy Policy
Snippets index

  Forms: Ask confirmation to leave page after any change

Javascript:

/*
 * Ask confirmation to leave page
 */

var objectChanged = false;
var askConfirmation = function() {
    return "Cambiando pagina verranno perse le modifiche correnti, confermi?";
};
var markObjectChanged = function(changedElement) {
    changedElement.addClass('fieldChanged');
    if(objectChanged) {
        return;
    }
    objectChanged = true;
    $(window).on('beforeunload', askConfirmation);
};

var object_form = $('#{{ opts.module_name }}_form');
object_form.find('input[type="text"], textarea').keydown(function(e) {
    markObjectChanged($(e.target));
});
object_form.find('input[type="text"], textarea, select').change(function(e) {
    markObjectChanged($(e.target));
});
object_form.on('submit', function(){
    $(window).off('beforeunload');
});

Styles:

/* Changed fields */

.fieldChanged {
    border: 1px solid #FC9D37 !important;
    background-color: #ff9 !important;
}

.fieldChanged + button {
    border: 1px solid #FC9D37 !important;
    background-color: #ff9 !important;
}

Another option (Self contained version)

Javascript:

function registerFormChanges(form) {
    form.find('input[type="text"], textarea, select').on('keydown change', function(e) {
        var changedElement = $(e.target);
        var changedForm = changedElement.closest('form');
        // console.log('changedElement: %o', changedElement);
        // console.log('changedForm: %o', changedForm);
        changedElement.addClass('fieldChanged');
        changedForm.addClass('formChanged');
    });
}

Usage:

registerFormChanges( $("#content-main form") );

...

var form = $("#content-main form");
if (form.hasClass('formChanged')) {
    ...
}