Предотвратите потерю данных формы, переходя от страницы

Question

Я создаю сетку данных с сотнями строк, которые содержат флажки в каждой строке, чтобы пользователь мог выбрать элемент из сетки.

Теперь пользователь может тратить много времени на фильтрацию / поиск по сетке и ставить галочки напротив необходимых флажков, только чтобы случайно нажать клавишу возврата на клавиатуре или щелкнуть гиперссылку на странице. И они потеряли бы все свои выборы флажка.

Итак, я хочу представить некоторые функциональные возможности, при которых если хотя бы один флажок был отмечен, то если пользователь непреднамеренно выполняет действие, которое приведет к его удалению со страницы, то отображается сообщение подтверждения JavaScript, чтобы уведомить пользователя об этом .

Флажки будут принадлежать к одной группе, например, они будут называться "продукты".

Можно ли вообще это сделать?

Answer 1

Событие beforeunload возникает, когда пользователь уходит: http://jsfiddle.net/FprNV/1/.

Возвращение строки приводит к появлению сообщения с двумя кнопками (остаться / перемещаться); Точная реализация этого диалога различается в разных браузерах.

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