Jquery предупреждает, если оставить страницу без нажатия кнопки сохранения

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

Это код jquery:

$(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 class="btn-primary" name="commit" type="submit" value="Save Material">

UPDATE Спасибо tymeJV!!!!!!!

Если кому-то это понадобится, это работает:

$(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;
    });
});

Ответы

Ответ 1

Учитывая вашу информацию о кнопке сохранения:

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

Вы можете установить значение formmodified

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

Ваша проверка в конце не должна запускаться сейчас

Ответ 2

$('#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.
});

Функция JQuery Form Serialize Google может собирать все входы форм и сохранять их в массиве. Я думаю, этого объяснения достаточно:)

Ответ 3

Это не точный ответ на вышеуказанный вопрос, но для справки для тех, кто ищет решение проблемы "уведомлять пользователей о несохраненных изменениях формы", как и я, я бы рекомендовал плагин jQuery AreYouSure. Этот очень легкий плагин обрабатывает все гайки и полужирные шрифты, например, отмененные изменения формы, нажав кнопку формы reset, добавив/удалив поля формы и т.д. Без каких-либо дальнейших действий.

Ответ 4

Если вы хотите, чтобы страница не удалялась при нажатии ссылки, вы можете привязываться к событию beforeunload и передавать e в:

$(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();
        }
    });
});