【问题标题】:How to disable beforeunload action when user is submitting a form?用户提交表单时如何禁用 beforeunload 操作?
【发布时间】:2011-01-24 22:32:45
【问题描述】:

我有这段小代码:

<script>
$(window).bind('beforeunload', function() {
  $.ajax({
    async: false,
    type: 'POST',
    url: '/something'
    });
  });
</script>

我想知道,当用户点击提交按钮时,如何禁用此请求。

基本上就像这里一样,在 SO 上。当您提出问题并决定关闭页面时,您会收到一个警告窗口,但在您提交表单时不会发生这种情况。

【问题讨论】:

    标签: javascript jquery ajax onbeforeunload


    【解决方案1】:

    使用beforeunload 事件处理程序调用unbind

    $('form#someForm').submit(function() {
       $(window).unbind('beforeunload');
    });
    

    要防止表单被提交,请添加以下行:

       return false;
    

    【讨论】:

    • 添加以下行:return false;,但我在哪里添加该行?
    • $(window).unbind('beforeunload');如下所述向我抛出错误 Uncaught SyntaxError: Unexpected token '.'但绑定在 $(window).bind('beforeunload', function(){return 'Are you sure you want to leave?';});
    【解决方案2】:

    使用

    $('form').submit(function () {
        window.onbeforeunload = null;
    });
    

    在你主要提交功能之前确保你有这个! (如果有的话)

    【讨论】:

    • 对我来说这有效,而 Jacob Relkin 的回答却没有
    【解决方案3】:

    这是我们使用的:

    在文档准备好时,我们调用 beforeunload 函数。

    $(document).ready(function(){
        $(window).bind("beforeunload", function(){ return(false); });
    });
    

    在任何提交或 location.reload 之前,我们取消绑定变量。

    $(window).unbind('beforeunload');
    formXXX.submit();
    
    $(window).unbind("beforeunload"); 
    location.reload(true);
    

    【讨论】:

      【解决方案4】:

      寻找 Detect onbeforeunload for ASP.NET web application 我很好, 如果使用带有母版页和内容页的 ASP.NET 页面上的某些输入控件发生更改,我必须显示警告消息。我在母版页上使用了 3 个内容占位符,最后一个在表单之后

      <form runat="server" id="myForm">
      

      所以在表单结束标记之后和正文结束标记之前使用了这个脚本

      <script>
              var warnMessage = "Save your unsaved changes before leaving this page!";
              $("input").change(function () {
                  window.onbeforeunload = function () {
                      return 'You have unsaved changes on this page!';
                  }
              });
              $("select").change(function () {
                  window.onbeforeunload = function () {
                      return 'You have unsaved changes on this page!';
                  }
              });
              $(function () {
                  $('button[type=submit]').click(function (e) {
                      window.onbeforeunload = null;
                  });
              });
          </script>
      

      就绑定而言,beforeunload 不能以这种方式可靠地工作。你应该在本地分配它

      所以我让它像这种绑定和取消绑定一样工作,对于我来说也没有工作随着 jQuery 1.7 起事件 API 已经更新,.bind()/.unbind() 仍然可以用于向后兼容,但是首选方法是使用 on()/off() 函数。

      【讨论】:

        【解决方案5】:
         <!DOCTYPE html>
         <html>
          <head>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
          <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.dirtyforms/2.0.0-beta00006/jquery.dirtyforms.min.js"></script>
          <script type="text/javascript">
            $(function() {
                $('#form_verify').dirtyForms();
            })
          </script>
          <title></title>
         <body>
        <form id="form_verify" action="a.php" method="POST">
            Firt Name <input type="text">
            Last Name <input type="file">
            <input type="submit">   
        </form>
        

        【讨论】:

          【解决方案6】:

          如果你正在使用绑定,那么使用这个:

          $('form').submit(function () {
              $(window).unbind('beforeunload');
          });
          

          这对所有表单提交都有好处。

          【讨论】:

            【解决方案7】:

            超级老问题,但可能对其他人有用。

            简单地将“beforeunload”从“submit”事件中分离出来对我来说是行不通的——因为即使表单中存在用户必须修复的错误,也会调用提交处理程序。因此,如果用户尝试提交表单,然后收到错误,然后单击另一个页面,他们将能够在没有警告的情况下离开。

            这是我的解决方法,似乎效果很好。

            (function($) {
            
                var attached = false,
                    allowed = false;
            
                // catch any input field change events bubbling up from the form
                $("form").on("change", function () {
                    // attach the listener once
                    if (!attached) {
                        $("body").on("click", function (e) {
                            // check that the click came from inside the form
                            // if it did - set flag to allow leaving the page
                            // otherwise - hit them with the warning
                            allowed = $(e.target).parents("form").length != 0;
                        });
            
                        window.addEventListener('beforeunload', function (event) {
                            // only allow if submit was called 
                            if (!allowed) {
                                event.preventDefault();
                                event.returnValue = 'You have unsaved changes.';
                            }
            
                        });
                    }                
                    attached = true;
                });
            
            }(jQuery));
            

            这样,如果离开页面的点击源自表单内部(如提交按钮) - 它不会显示警告。如果离开页面的点击来自表单之外,那么它会警告用户。

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 2012-05-09
              • 1970-01-01
              • 2012-03-30
              • 2015-01-06
              • 1970-01-01
              • 1970-01-01
              • 2016-04-03
              相关资源
              最近更新 更多