[jQuery] 페이지 이동전 Form 데이터 변경여부 확인하기

페이지 이동전 Form 데이터 변경여부 확인하기

html

<input type="text" id="name" name="name"/>

<input type="text" id="address" name="address"/>

<select id="job" name="job">

<option value="teacher">teacher</option>

<option value="student">student</option>

</select>

<input type="button" id="btn_save" value="저장"/>

script

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

var isChange = false;

// input, select에 change event가 일어날 경우

$("input, select").change(function(){

isChange  = true;

});

// 페이지 이동이 있을경우

// window.onbeforeunload = function(){

$(window).on("beforeunload", function(){

// 데이터 변경이 있을경우

if(isChange){

return "이 페이지를 벗어나면 작성된 내용은 저장되지 않습니다.";

}

});

// 저장버튼 클릭시 변경값을 false로 바꿔준다.

$("#btn_save").click(function(){

isChange = false;

// submit

});

});

</script>