jquery warn if leaving page without clicking the save button

The following code executes a warning if you change data on the page and then leave the page. I want that - except when the user presses the save button.

This is the jquery code:

$(document).ready(function() {
formmodified=0;
$('form *').change(function(){
formmodified=1;
});
window.onbeforeunload = confirmExit;
function confirmExit() {
if (formmodified == 1) {
return "New information not saved. Do you wish to leave the page?";
}
}
});


This is the button that saves the data:

<input class="btn-primary" name="commit" type="submit" value="Save Material">


UPDATE
Thanks tymeJV !!!!!!!

In case someone else need it, this works:

$(document).ready(function() {
formmodified=0;
$('form *').change(function(){
formmodified=1;
});
window.onbeforeunload = confirmExit;
function confirmExit() {
if (formmodified == 1) {
return "New information not saved. Do you wish to leave the page?";
}
}
$("input[name='commit']").click(function() {
formmodified = 0;
});
});


5 Answers
5

Given your save button info:

<input class="btn-primary" name="commit" type="submit" value="Save Material">


You can set the value of formmodified

formmodified

$("input[name='commit']").click(function() {
formmodified = 0;
});


Your check at the end shouldn't be triggered now

window.onbeforeunload

confirmExit()

input.commit

submit

click

$('form#id').submit(function() { formmodified = 0; });

$('#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 :)

This is not an exact answer to the above question but for reference for those who are searching for a solution to the problem 'notify users about unsaved form changes' like I was, I'd like to recommend the jQuery plugin AreYouSure.
This very lightweight plugin handles all the nuts and bolds like reverted form changes, clicking the form reset button, adding/removing form fields etc. without any further fiddling.

If you want to prevent the page from leaving when a link is clicked, you can bind to the beforeunload event and pass e in:

$(document).ready(function() {
var modified = false;
$(window).bind('beforeunload', function(e){
if (modified) {
$.confirm({
'title' : 'Did You Save Your Changes?',
'message' : 'It seems as if you have made changes but didn't click Save.nAre you sure you want to leave the page?',
'buttons' : {
'OK' : {
'class' : 'gray',
'action': function(){} // Nothing to do in this case. This can be omitted if you prefer.
}
})
}
e.preventDefault();
}
});
});


First, you need to get the value of your inputs if the user has done any changes to the form. so i came up with this answer:

document.querySelector('.send').addEventListener("click", function(){
window.btn_clicked = true;
});
window.onbeforeunload = function(){
var bla = $('#lot_t').val(); // getting the value of input
if(!bla == ''){ //checking if it is null
return 'Are you sure to leave this page?';
}

};


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.