jquery - 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。这个非常轻量级的插件可以处理所有的细节，如恢复表单更改、单击表单重置按钮、添加/删除表单字段等，无需任何进一步的摆弄。

Answer 4

在模糊之前不会显示您的警告，这不会是 100% 万无一失的。更改以下行以使其不透气：

$('form *').change(function () {

至

$('form *').on('change input', function () {

Answer 5

如果要防止点击链接时页面离开，可以绑定 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();
        }
    });
});    

Answer 6

首先，如果用户对表单进行了任何更改，您需要获取输入的值。所以我想出了这个答案：

    document.querySelector('.send').addEventListener("click", function(){
        window.btn_clicked = true;
    });
    window.onbeforeunload = function(){
       if(!window.btn_clicked){
        var bla = $('#lot_t').val(); // getting the value of input
          if(!bla == ''){    //checking if it is not null
            return 'Are you sure to leave this page?';
          }
}


    };

Answer 7

我的代码，从示例中更改了一些内容，因为它在我的情况下不起作用

  $(document).ready(function() {
        let formmodified = 0;
        $('#id_form').change(function(){
            formmodified=1;
            console.log(formmodified)
        });
        $('#id_buttom').click(function() {
            formmodified = 0;
            console.log(formmodified)
        });
        window.onbeforeunload = confirmExit;
        function confirmExit() {
            console.log('s');
            if (formmodified == 1) {
                return "Exit?";
            }
        }
    });