单击提交按钮时如何防止调用onbeforeunload

How can I prevent onbeforeunload from being called when clicking the submit button?

如何在单击提交按钮时阻止调用onbeforeunload?

$(document).ready(function() 
 {
  $('input:text,input:checkbox,input:radio,textarea,select').one('change', function() 
  {
   //('BODY').attr('onbeforeunload',"return 'Leaving this page will cause any unsaved data to be lost.';");
   if(
   window.onbeforeunload = function() { return 'You have unsaved changes!'; }

  });

 });

5 个解决方案

#1

You can't prevent the calling of unbeforeunload, but using a global flag variable, you can control whether it displays a warning.

您无法阻止调用unbeforeunload,但使用全局标志变量,您可以控制它是否显示警告。

in the document, add the script:

在文档中,添加脚本:

warn_on_unload = "You have unsaved changes!"

in the submit event, add:

在提交事件中,添加:

warn_on_unload = "";

the definition of the event, change to:

事件的定义,改为:

window.onbeforeunload = function() { return warn_on_unload; }

through warn_on_unload, you can now switch the warning message on or off at will.

通过warn_on_unload,您现在可以随意打开或关闭警告消息。

#2

Here is the final code:

这是最终的代码:

$(document).ready(function() 
{
    var warn_on_unload="";
    $('input:text,input:checkbox,input:radio,textarea,select').one('change', function() 
    {
        warn_on_unload = "Leaving this page will cause any unsaved data to be lost.";

        $('#submit').click(function(e) { 
            warn_on_unload = "";}); 

            window.onbeforeunload = function() { 
            if(warn_on_unload != ''){
                return warn_on_unload;
            }   
        }
    });
});

#3

you can use .on() to bind onbeforeunload and then use .off() to unbind it in form submission, short and sweet

你可以使用.on()绑定onbeforeunload,然后使用.off()在表单提交中取消绑定,简短而甜蜜

$(document).ready(function () {
    $(window).on('beforeunload', function(){
        return "You have unsaved changes!";
    });
    $(document).on("submit", "form", function(event){
        $(window).off('beforeunload');
    });
}

#4

Modified it : now ignores form submission

修改它:现在忽略表单提交

$(document).ready(function () {
var warn_on_unload = "";
$('input:text,textarea').on('change', function () {
    warn_on_unload = "Leaving this page will cause any unsaved data to be lost.";
    $("form").submit(function () {
        warn_on_unload = "";
    });
    window.onbeforeunload = function () {
        if (warn_on_unload != '') {
            return warn_on_unload;
        }
    }
});
});

#5

If you just want to disable Onbeforeunload Event on submit button. So here an example code

如果您只想在提交按钮上禁用Onbeforeunload事件。所以这里是一个示例代码

document.getElementById('sub').onsubmit = function(e) {
 window.onbeforeunload = null;
 return true;
}

But if you want to monitors forms changes and alerts(confirmation Box) the user before leaving the page, Then I'll suggest you to you Plugin here is one jquery plugin that do exactly what i have written https://github.com/snikch/jquery.dirtyforms

但是如果你想在离开页面之前监视表单更改和警报(确认框)用户那么我会建议你插件这里是一个jquery插件,完全按照我所写的编写https://github.com/ snikch / jquery.dirtyforms

The Plugin Monitior Your forms changes and alert before leaving the Page

插件Monitior您的表单在离开页面之前会更改并发出警报

The Best Part "It will not dispaly the alert Box when you click on Submit Button" OR You Submit your Form

最佳部分“当您点击提交按钮时,它不会显示警告框”或您提交表格

Example Code:-

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

#1