사용자가 특정 버튼을 클릭하지 않으면 경고 상자를 표시하는 방법

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으로 바인딩되어 있습니다.

자바 스크립트에서 변수의 범위 지정을 염두에 두십시오. 클릭 핸들러 안에 변수 needToConfirm을 재정의하면 다른 기능에서 공유하려는 "전역 변수"에 액세스 할 필요가 없습니다. 물론 다른 사람들이 지적한 것처럼 다른 HTML 요소에도 동일한 id을 사용하지 마십시오. 그것은 그런 식으로 사용되어서는 안됩니다.

Answer 2

먼저, if 문 내부에 조건부 코드를 실행하지 않습니다. 그것에서 그것, 그것을 고치고 다시 시도하십시오. 여전히 다음 작동하지 않는 경우 다음과 같은 :.. $("#save").click()이 경우 (아무것도 반환하기 전에

페이지를 새로 고칠 수, needToConfirm = false 따라서 경고 상자가 평소와 같이 나타납니다 당신은 다음과 같이 HTML을 수정해야합니다 :

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

과 당신이 할 수있는 ... 실제로 양식을 제출 자바 스크립트를 사용하는 다음과 같이

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

을 lso, 2 개의 요소가 동일한 ID를 가질 수 없으므로 단추 중 하나의 ID를 변경하거나 대신 클래스를 사용하십시오!