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，则不一定会访问＆＃34; global＆＃34;您打算在不同功能之间共享的变量。正如其他人所指出的那样，对于不同的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 ...或者使用类来代替！

如何向用户显示警告框，除非他们单击特定按钮

2 个答案: