[Code Snippet] jQuery : Confirm Before Exit

Gmail compose has functionality to detect any content modification and confirm us before closing browser’s window because of unsaved content that we’ve modify, yes in this post i will try to explain how to make these function work on our webapps.

Firstly, we create a boolean variable with default value false then we check is there any content in our input that have been modified by the user. If the user has been modified then we change the boolean variable value to true.

Now, we create a function (named checkIsEdit) to check the value of the boolean variable, if the value is true then alert the user that the’ve modify some content. And the last step, we attach checkIsEdit function to the window event (onbeforeunload) to check whether the window is being refreshed or closed and fire up the function. That’s it, check out this following code :

$(document).ready(function() {

	var isEdit	= false;

	$('input').change(function() {
		isEdit = true;
	});

	function checkIsEdit() {
		if(isEdit)
			return "You have modify some content";
	}

	window.onbeforeunload = checkIsEdit;
});