Jquery 提醒未保存的表单更改

This is what i am using, Put all this code in a separate JS file and load it in your header file so you will not need to copy this again and again:

var unsaved = false;

$(":input").change(function(){ //triggers change in all input fields including text type
    unsaved = true;
});

function unloadPage(){ 
    if(unsaved){
        return "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?";
    }
}

window.onbeforeunload = unloadPage;

EDIT for $ not found:

此错误只能由以下三种原因之一引起:

1. 您的JavaScript文件未正确加载到页面中
2. 你有一个拙劣的jQuery版本.这可能是因为有人编辑了核心文件，或者插件可能已经覆盖了核心文件$
3. 在页面完全加载之前，也就是在jQuery完全加载之前，您已经运行了JavaScript.

Make sure all JS code is being placed in this:

$(document).ready(function () {
  //place above code here
});

Edit for a Save/Send/Submit Button Exception

$('#save').click(function() {
    unsaved = false;
});

Edit to work with dynamic inputs个

// Another way to bind the event
$(window).bind('beforeunload', function() {
    if(unsaved){
        return "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?";
    }
});

// Monitor dynamic inputs
$(document).on('change', ':input', function(){ //triggers change in all input fields including text type
    unsaved = true;
});

Add the above code in your alert_unsaved_changes.js file.

Hope this helps.