除非用户单击特定的按钮，否则如何向用户显示警报框

Question

我已经建立了一个表单，用户可以使用PHP进行更改。 当他们尝试离开页面或刷新时，使用JS出现一个警告框。 但是，当他们单击“保存”按钮时，仍会出现警告框。

当用户单击“保存”按钮时，有什么方法可以阻止警报框出现？

这是我的JS：

 var needToConfirm = true; $('#save').click(function(){ var needToConfirm = false; }) if (needToConfirm == true) window.onbeforeunload = confirmExit; function confirmExit() { return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?"; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Here is my HTML (just the button): --> <input type="submit" id="save" /> <input type="hidden" id="save" name="submitted" value="TRUE" /> 

Answer 1

如果我理解正确，那么当有人单击“保存”按钮时，您不想显示确认对话框吗？ 为什么不像这样在单击处理程序中注销onbeforeunload方法：

window.onbeforeunload = confirmExit; //By default assign the confirmExit

//If user clicks on save, just set it to null.
$('#save').click function(){
 window.onbeforeunload = null;
}

这样，您无需维护一个名为needToConfirm的单独变量。 另外，请尝试了解javascript执行代码的方式。 它逐行完成。 因此， 当用户单击保存时 ，在单击处理程序中定义的needToConfirm现在将设置为false 。 但即使在调用该回调之前，您也已经绑定了onbeforeunload事件，因为needToConfirm的默认值为true 。

尝试也要记住javascript中变量的作用域。 如果在点击处理程序中重新定义变量needToConfirm则不一定访问要在不同功能之间共享的“全局”变量。 当然，就像其他人指出的那样，不要对不同的HTML元素使用相同的id 。 它不应该那样使用。

Answer 2

首先，您没有在if语句中执行条件代码。 没问题了，请解决此问题，然后重试。 如果仍然无法使用，请尝试以下操作：

在$("#save").click()返回任何内容之前刷新页面（在这种情况下， needToConfirm = false 。因此，警告框照常显示。您必须按如下方式修改html：

<input type="button" id="save" />

并使用javascript实际提交表单...您可以按照以下步骤进行操作：

$("#save").click(function() { var needToConfirm = false; $("#idOfForm").submit(); return false; }

另外，将按钮之一的ID更改为2个元素永远不能具有相同的ID ...或改用class！