How To Warn User Before Leaving Your Web Page With Unsaved Changes

Here’s a Jquery script I tested on the project I’m doing to warn user that their changes will not be saved once they navigated away from the page without clicking the submit button yet.

Just copy paste it on the footer of any page you want to have warnings on, inside the script tag.


var isSubmitting = false;

$(document).ready(function () {
$('form').submit(function(){
isSubmitting = true;
})

$('form').data('initial-state', $('form').serialize());

$(window).on('beforeunload', function() {
if (!isSubmitting && $('form').serialize() != $('form').data('initial-state')){
return 'You have unsaved changes which will not be saved.'
}
});
})