退出确认功能及使用JavaScript和jQuery删除提交功能

Question

我希望能够让用户在不想提交表单的情况下确认是否离开页面。
但是，我不希望这个功能在提交按钮上起作用。当用户点击提交时，我不希望他们因为出现退出确认而感到困惑。
涉及的id是#publishbtn，我正在尝试使用.off方法。
脚本位于页面底部
不确定这是否是一个问题。

<%= f.submit "PUBLISH", :class => "greenbtn extrayo", :id => "publishbtn" %>


<script type="text/javascript">
  window.onbeforeunload = confirmExit;
  function confirmExit()
  {
    return "Ready to move on? Or you wanna leave?";
  }
  $( "#publishbtn" ).click(function() {
  $( "body" )
    .off( "click", "#publishbtn", confirmExit )
    .find( "#publishbtn" )
      .text( "Put into" );
});
</script>

- Rick G

Answer 1

使用window.onbeforeunload = null来移除监听器。如果要在表单提交时移除它，可以使用以下代码：

$('#someForm').on('submit', function (event) {
    window.onbeforeunload = null;
});

其中 someForm 是您的 <form> 元素的 id。

- Andrew Surzhynskyi

---

非常感谢！它像魔法一样起作用了！我想给你点赞，但我是stackoverflow的新手。 - Rick G

欢迎来到stackoverflow！如果这个答案解决了你的问题，你可以将其标记为已接受的答案。如果你不知道如何操作，请参考以下链接中的文章：http://meta.stackexchange.com/a/5235/238078。 - Andrew Surzhynskyi

对我没用（不知道为什么（我的答案在Chrome中有效））。 - SanThee

Answer 2

我在做这个：

如果某个字段需要在更改时进行确认，我会将类“confirm”添加到该字段中，如下所示：

<label id="first_label" for="FName">First Name:</label>
            <input id="first" class="confirm" type="text" name="FName" value="@FName" />

我在提交表单时设置了needToConfirm的值，就像这样：

<input id="save" type="submit" name="buttonSubmit" value="Save" onclick="needToConfirm = false" />

然后在我的JavaScript部分，我添加了这段jQuery代码：

    $(document).ready(function () {
        needToConfirm = false; });

     $(document).ready(function(){$(window).unload(function() 
       {
        if (needToConfirm) 
         {
            return confirm("Your unsaved data will be lost, continue?");
            return needToConfirm;
         }
       });
    });

    $(".confirm").change(function () {
        needToConfirm = true;
    });

使用 confirm 类更改字段的值，如果用户尝试在不保存的情况下离开页面，则会出现警告。否则，它只会提交表单。

- Thomas Fonseca

Answer 3

您可以设置window.onbeforeunload=null。

您可以通过几种方式来实现这一点。其中一种方法是在提交表单后将值设置为如下（请确保更改选择器以针对正确的表单）：

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

或者，当用户单击表单的提交按钮时，您也可以这样做。两种方法都是正确的。

$("#publishbtn").click(function() {
    window.onbeforeunload=null;
});

- Mike Hamilton

Answer 4

这个答案对我没有用，这个可以用：(Chrome)

HTML:

<input type="submit" onclick="clearConfirm();" value="Submit">

js：

function clearConfirm() {
    window.onbeforeunload = null;
}

不知道为什么...

- SanThee