特定のボタンをクリックしない限り、警告ボックスをユーザーに表示する方法

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に設定されます。しかし、そのコールバックが呼び出される前でさえ、イベントの既定値は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; }

Aをlso、2つの要素が同じIDを持つことはできません...ボタンの1つのIDを変更するか、代わりにクラスを使用してください！