首先要檢查表單的欄位是否有修改過,一般使用jQuery會使用change的方式去做偵測,但是這個有些缺陷,萬一改回來時,程式一樣判斷為已經修改了。最好的方式是檢查欄位的原先值是否一樣,這要利用欄位defaultValue特性。

Step.1
請先在表單網頁中引用下面的jQuery套件,
jQuery套件-檢查頁面的欄位是否有變更

Step.2
接著要判斷是否離開頁面:

window.onbeforeunload = function confirmExit(){
var modified = $.hasChanged(); //true表示欄位有修改
if (modified){
return ‘★★ 您尚未儲存編輯過的表單資料,請問您確定要離開本頁面嗎? ★★’;
}
}

Step.3
引用之後,你會發現到,當真正要儲存表單submit時,也會出上面的警告視窗,還要按一次按鈕確定是很麻煩的,所以要把step.2的判斷取消掉。

<input onclick=”window.document.body.onbeforeunload=null;” type=”submit” value=”submit” />

以上3個步驟即可

離開尚未儲存的表單前,顯示提示視窗
標籤:        

發表迴響