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

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

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

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

Answer 4

直到模糊，您的警告才会出现，这并不是百分百的万无一失。更改以下行以使其密闭：

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

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

7 个答案: