jquery在没有单击保存按钮的情况下离开页面时发出警告

Question

如果您更改页面上的数据然后离开页面,以下代码将执行警告.我想要 - 除非用户按下保存按钮.

这是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">

更新谢谢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;
    });
});

Answer 1

根据您的保存按钮信息:

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

您可以设置值 formmodified

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

现在不应该触发最后的检查

Answer 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.
});

您可以使用Google JQuery Form Serialize功能,这将收集所有表单输入并将其保存在数组中.我想这个解释就够了:)

Answer 3

这不是对上述问题的确切答案，而是供那些像我一样正在寻找“通知用户未保存的表单更改”问题解决方案的人参考，我想推荐 jQuery 插件AreYouSure。这个非常轻量级的插件可以处理所有的坚果和粗体，比如恢复表单更改、单击表单重置按钮、添加/删除表单字段等，无需任何进一步的摆弄。