Displays a confirmation dialog if a form’s changed and the user tries to leave the page.

gistfile1.js

(function ($) {
	$.fn.confirmUnload = function (options) {
		var settings = $.extend({
			message: 'You have unsaved changes.'
		}, options);

		return this.filter('form').each(function () {
			var form = $(this);
			var dataOnLoad = form.serialize();

			form.find('input').on('change keyup', function (e) {
				var currentData = form.serialize();
				if (currentData != dataOnLoad) {
					window.onbeforeunload = function () {
						return settings.message;
					};
				} else {
					window.onbeforeunload = null;
				}
			});

			form.submit(function (e) {
				window.onbeforeunload = null;
			});
		});
	}
})(jQuery);

Example usage:

<form action="" method="POST" data-confirm-unload>
  <!-- inputs -->
</form>
<script>
  $('[data-confirm-unload]').confirmUnload();
</script>

You can also customise the message displayed in the dialog box:

$('[data-confirm-unload]').confirmUnload({
  message: 'Save you changes, foo’!'
});