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

- Reddirt

---

'formmodified' 只在页面持续使用吗？而且不会传递下去吗？如果是这样，那么只需在单击“保存”按钮或表单提交时将其设置为 0。 - MasNotsram

不确定我理解了，您想要一个警告，当您单击保存按钮时，信息未被保存？ - Colin Bacon

可能是 在网页上有未保存的更改时警告用户 的重复问题。 - Wasim A.

如何通过 confirmExit 函数将参数作为参数传递？ - Alberto Acuña

这很棒 - 但是截止到目前（2017年11月），火狐浏览器显示的不是这个消息，而是一个通用消息。有人知道如何显示自定义提示文本吗？ - kneidels

Answer 1

给定您的保存按钮信息：

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

您可以设置formmodified的值

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

你现在不应该触发结尾处的检查。

- tymeJV

---

运行得很顺利。实际上，我们并不需要最后一行“确定要离开页面吗？”因为这似乎是浏览器（至少是Chrome）确认提示框的一部分。 - cbmtrx

嗯，也许我说得太早了，@tymeJV。看起来至少在Chrome上，window.onbeforeunload会在input.commit按钮的点击被注册之前调用confirmExit()函数。因此，它甚至在表单提交时也会弹出警报。 - cbmtrx

解决方案是使用submit而不是click： $（'form#id'）.submit（function（）{ formmodified = 0; }）;@Reddirt @tymeJV - cbmtrx

@cbmtrx，我有一个小问题。当我编辑文本框并直接在浏览器中点击刷新按钮时，不会显示确认信息。只有在单击输入框外部后，才会触发该输入侦听器的.change事件。 - kishorer747

@kishorer747 看起来DOM只有在编辑表单字段失焦后才会更新。你可能需要使用jQuery事件监听器来更新DOM以响应表单字段的任何单个更改。 - cbmtrx

不要试图挂钩'onbeforeunload'，可能的解决方案是使用'mouseleave'。$('#totalpage').mouseleave。 - Robert Koernke

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

您可以搜索JQuery表单序列化函数，它会收集所有表单输入并保存在数组中。我想这个解释已经足够清晰明了 :)

- Wasim A.

---

一些解决方案的说明会有所帮助，此外您还可以从中获得更多收益。 - suspectus

Answer 3

这并不是对上述问题的确切回答，但对于那些像我一样在寻找“通知用户有未保存的表单更改”的解决方案的人们，我想推荐jQuery插件AreYouSure。

这个非常轻量级的插件处理了所有复杂的内容，如撤销表单更改、点击表单重置按钮、添加/删除表单字段等，而无需进一步操作。

- wedi

Answer 4

您的警告将在失去焦点时才会显示，这并不能完全保证安全。请更改以下行以使其完全可靠：

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

到

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

- JasonM

---

感谢阅读格式指南。我是长期潜水者，现在开始做出贡献了。 - JasonM

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

- Outside Edge

---

对我来说不起作用：在浏览器中点击任何链接或重新加载页面，只会打开/重新加载页面。 - Fabien

自2011年5月25日起，HTML5规范规定在此事件期间调用window.alert()、window.confirm()和window.prompt()方法可能会被忽略。有关更多详细信息，请参阅HTML5规范。 - dieend

Answer 6

我的代码，从示例中更改了一些东西，因为在我的情况下它没有起作用

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

- gerMdz

Answer 7

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

    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?';
          }
}


    };

- curiosity