退出确认功能并在使用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>

Answer 1

使用window.onbeforeunload = null删除监听器。要在表单提交中将其删除，您可以使用以下方法：

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

someForm是您的<form>元素的ID。

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

然后在我的Java脚本部分中，我添加了以下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;
    });

如果使用确认类更改字段的值，如果用户尝试不保存就离开页面，则会显示警告。否则，它仅提交表单。

Answer 3

您可以设置window.onbeforeunload=null。

您可以通过几种方法执行此操作。一种在提交表单后设置值的方法（请确保将选择器更改为正确的表单）：

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

或您可以在用户单击表单的提交按钮时执行此操作。两种方法都是正确的。

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

Answer 4

This answer不适用于我，这确实有效：（Chrome）

html：

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

js：

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

不知道为什么...