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')) { ... }