Prevent form data loss by moving from the page

Question

I am creating a datagrid with hundreds of rows that contain a check box for each row so that the user can select an element from the grid.

Now the user can spend a lot of time filtering / searching the grid and check the necessary boxes to accidentally press the backspace key on his keyboard or click on the hyperlink on the page. And they would lose all their flags.

So, I want to introduce some functionality in which, if at least one checkbox was checked, then if the user inadvertently performs an action that will move them far from the page, a JavaScript confirmation message will appear to notify the user about this.

Flags will belong to the same group, for example, they will be called "products."

Can this be done at all?

Answer 1

There is a beforeunload event that occurs when a user moves: http://jsfiddle.net/FprNV/1/ .

Returning a line results in a message with two buttons (stay / move); the exact implementation of this dialog is different from browsers.

 $(window).bind('beforeunload', function() { var checkboxcount = $("input:checkbox:checked").length; if(checkboxcount > 0) { return 'Are you sure?'; } });