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

【问题标题】：How can I display alert box to users unless they click a specific button除非用户单击特定按钮，否则如何向用户显示警报框
【发布时间】：2017-03-18 10:04:45
【问题描述】：

我已经设置了一个页面，其中包含一个用户可以使用 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" />

【问题讨论】：

你不能有两个具有相同 id 的元素。 ID 在整个页面中必须是唯一的。

标签： javascript jquery html

【解决方案1】：

首先，您没有在 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...或者改用类！

【讨论】：

【解决方案2】：

如果我理解正确，您不想在有人单击保存按钮时显示确认对话框，对吧？为什么不像这样在该点击处理程序中取消注册 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。它不应该那样使用。

【讨论】：