除非用戶單擊特定的按鈕，否則如何向用戶顯示警報框

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！