检测未保存的更改

小开

In the .aspx page, you need a Javascript function to tell whether or not the form info is "dirty"

<script language="javascript">
var isDirty = false;


function setDirty() {
isDirty = true;
}


function checkSave() {
var sSave;
if (isDirty == true) {
sSave = window.confirm("You have some changes that have not been saved. Click OK to save now or CANCEL to continue without saving.");
if (sSave == true) {
document.getElementById('__EVENTTARGET').value = 'btnSubmit';
document.getElementById('__EVENTARGUMENT').value = 'Click';
window.document.formName.submit();
} else {
return true;
}
}
}
</script>
<body class="StandardBody" onunload="checkSave()">

and in the codebehind, add the triggers to the input fields as well as resets on the submission/cancel buttons....

btnSubmit.Attributes.Add("onclick", "isDirty = 0;");
btnCancel.Attributes.Add("onclick", "isDirty = 0;");
txtName.Attributes.Add("onchange", "setDirty();");
txtAddress.Attributes.Add("onchange", "setDirty();");
//etc..

小开

One method, using arrays to hold the variables so changes can be tracked.

Here's a very simple method to detect changes, but the rest isn't as elegant.

Another method which is fairly simple and small, from Farfetched Blog:

<body onLoad="lookForChanges()" onBeforeUnload="return warnOfUnsavedChanges()">
<form>
<select name=a multiple>
<option value=1>1
<option value=2>2
<option value=3>3
</select>
<input name=b value=123>
<input type=submit>
</form>


<script>
var changed = 0;
function recordChange() {
changed = 1;
}
function recordChangeIfChangeKey(myevent) {
if (myevent.which && !myevent.ctrlKey && !myevent.ctrlKey)
recordChange(myevent);
}
function ignoreChange() {
changed = 0;
}
function lookForChanges() {
var origfunc;
for (i = 0; i < document.forms.length; i++) {
for (j = 0; j < document.forms[i].elements.length; j++) {
var formField=document.forms[i].elements[j];
var formFieldType=formField.type.toLowerCase();
if (formFieldType == 'checkbox' || formFieldType == 'radio') {
addHandler(formField, 'click', recordChange);
} else if (formFieldType == 'text' || formFieldType == 'textarea') {
if (formField.attachEvent) {
addHandler(formField, 'keypress', recordChange);
} else {
addHandler(formField, 'keypress', recordChangeIfChangeKey);
}
} else if (formFieldType == 'select-multiple' || formFieldType == 'select-one') {
addHandler(formField, 'change', recordChange);
}
}
addHandler(document.forms[i], 'submit', ignoreChange);
}
}
function warnOfUnsavedChanges() {
if (changed) {
if ("event" in window) //ie
event.returnValue = 'You have unsaved changes on this page, which will be discarded if you leave now. Click "Cancel" in order to save them first.';
else //netscape
return false;
}
}
function addHandler(target, eventName, handler) {
if (target.attachEvent) {
target.attachEvent('on'+eventName, handler);
} else {
target.addEventListener(eventName, handler, false);
}
}
</script>

小开

One piece of the puzzle:

/**
* Determines if a form is dirty by comparing the current value of each element
* with its default value.
*
* @param {Form} form the form to be checked.
* @return {Boolean} <code>true</code> if the form is dirty, <code>false</code>
*                   otherwise.
*/
function formIsDirty(form) {
for (var i = 0; i < form.elements.length; i++) {
var element = form.elements[i];
var type = element.type;
if (type == "checkbox" || type == "radio") {
if (element.checked != element.defaultChecked) {
return true;
}
}
else if (type == "hidden" || type == "password" ||
type == "text" || type == "textarea") {
if (element.value != element.defaultValue) {
return true;
}
}
else if (type == "select-one" || type == "select-multiple") {
for (var j = 0; j < element.options.length; j++) {
if (element.options[j].selected !=
element.options[j].defaultSelected) {
return true;
}
}
}
}
return false;
}

And another:

window.onbeforeunload = function(e) {
e = e || window.event;
if (formIsDirty(document.forms["someForm"])) {
// For IE and Firefox
if (e) {
e.returnValue = "You have unsaved changes.";
}
// For Safari
return "You have unsaved changes.";
}
};

Wrap it all up, and what do you get?

var confirmExitIfModified = (function() {
function formIsDirty(form) {
// ...as above
}


return function(form, message) {
window.onbeforeunload = function(e) {
e = e || window.event;
if (formIsDirty(document.forms[form])) {
// For IE and Firefox
if (e) {
e.returnValue = message;
}
// For Safari
return message;
}
};
};
})();


confirmExitIfModified("someForm", "You have unsaved changes.");

You'll probably also want to change the registration of the beforeunload event handler to use LIBRARY_OF_CHOICE's event registration.

小开

最佳答案

Using jQuery:

var _isDirty = false;
$("input[type='text']").change(function(){
_isDirty = true;
});
// replicate for other input types and selects

Combine with onunload/onbeforeunload methods as required.

From the comments, the following references all input fields, without duplicating code:

$(':input').change(function () {

Using $(":input") refers to all input, textarea, select, and button elements.

小开

Thanks for the replies everyone. I ended up implementing a solution using JQuery and the Protect-Data plug-in. This allows me to automatically apply monitoring to all controls on a page.

There are a few caveats however, especially when dealing with an ASP .Net application:

When a user chooses the cancel option, the doPostBack function will throw a JavaScript error. I had to manually put a try-catch around the .submit call within doPostBack to suppress it.
On some pages, a user could perform an action that performs a postback to the same page, but isn't a save. This results in any JavaScript logic resetting, so it thinks nothing has changed after the postback when something may have. I had to implement a hidden textbox that gets posted back with the page, and is used to hold a simple boolean value indicating whether the data is dirty. This gets persisted across postbacks.
You may want some postbacks on the page to not trigger the dialog, such as a Save button. In this case, you can use JQuery to add an OnClick function which sets window.onbeforeunload to null.

Hopefully this is helpful for anyone else who has to implement something similar.

小开

This is exactly what the Fleegix.js plugin fleegix.form.diff (http://js.fleegix.org/plugins/form/diff) was created for. Serialize the initial state of the form on load using fleegix.form.toObject (http://js.fleegix.org/ref#fleegix.form.toObject) and save it in a variable, then compare with the current state using fleegix.form.diff on unload. Easy as pie.

小开

The following solution works for prototype (tested in FF, IE 6 and Safari). It uses a generic form observer (which fires form:changed when any fields of the form have been modified), which you can use for other stuff as well.

/* use this function to announce changes from your own scripts/event handlers.
* Example: onClick="makeDirty($(this).up('form'));"
*/
function makeDirty(form) {
form.fire("form:changed");
}


function handleChange(form, event) {
makeDirty(form);
}


/* generic form observer, ensure that form:changed is being fired whenever
* a field is being changed in that particular for
*/
function setupFormChangeObserver(form) {
var handler = handleChange.curry(form);


form.getElements().each(function (element) {
element.observe("change", handler);
});
}


/* installs a form protector to a form marked with class 'protectForm' */
function setupProtectForm() {
var form = $$("form.protectForm").first();


/* abort if no form */
if (!form) return;


setupFormChangeObserver(form);


var dirty = false;
form.observe("form:changed", function(event) {
dirty = true;
});


/* submitting the form makes the form clean again */
form.observe("submit", function(event) {
dirty = false;
});


/* unfortunatly a propper event handler doesn't appear to work with IE and Safari */
window.onbeforeunload = function(event) {
if (dirty) {
return "There are unsaved changes, they will be lost if you leave now.";
}
};
}


document.observe("dom:loaded", setupProtectForm);

小开

The following uses the browser's onbeforeunload function and jquery to capture any onchange event. IT also looks for any submit or reset buttons to reset the flag indicating changes have occurred.

dataChanged = 0;     // global variable flags unsaved changes


function bindForChange(){
$('input,checkbox,textarea,radio,select').bind('change',function(event) { dataChanged = 1})
$(':reset,:submit').bind('click',function(event) { dataChanged = 0 })
}




function askConfirm(){
if (dataChanged){
return "You have some unsaved changes.  Press OK to continue without saving."
}
}


window.onbeforeunload = askConfirm;
window.onload = bindForChange;

小开

I expanded on Slace's suggestion above, to include most editable elements and also excluding certain elements (with a CSS style called "srSearch" here) from causing the dirty flag to be set.

<script type="text/javascript">
var _isDirty = false;
$(document).ready(function () {


// Set exclude CSS class on radio-button list elements
$('table.srSearch input:radio').addClass("srSearch");


$("input[type='text'],input[type='radio'],select,textarea").not(".srSearch").change(function () {
_isDirty = true;
});
});


$(window).bind('beforeunload', function () {
if (_isDirty) {
return 'You have unsaved changes.';
}
});

小开

I recently contributed to an open source jQuery plugin called dirtyForms.

The plugin is designed to work with dynamically added HTML, supports multiple forms, can support virtually any dialog framework, falls back to the browser beforeunload dialog, has a pluggable helper framework to support getting dirty status from custom editors (a tinyMCE plugin is included), works within iFrames, and the dirty status can be set or reset at will.

https://github.com/snikch/jquery.dirtyforms

小开

Here's a javascript / jquery solution that is simple. It accounts for "undos" by the user, it is encapsulated within a function for ease of application, and it doesn't misfire on submit. Just call the function and pass the ID of your form.

This function serializes the form once when the page is loaded, and again before the user leaves the page. If the two form states are different, the prompt is shown.

Try it out: http://jsfiddle.net/skibulk/Ydt7Y/

function formUnloadPrompt(formSelector) {
var formA = $(formSelector).serialize(), formB, formSubmit = false;


// Detect Form Submit
$(formSelector).submit( function(){
formSubmit = true;
});


// Handle Form Unload
window.onbeforeunload = function(){
if (formSubmit) return;
formB = $(formSelector).serialize();
if (formA != formB) return "Your changes have not been saved.";
};
}


$(function(){
formUnloadPrompt('form');
});

小开

      var unsaved = false;
$(":input").change(function () {
unsaved = true;
});


function unloadPage() {
if (unsaved) {
alert("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;

小开

Detect form changes with using jQuery is very simple:

var formInitVal = $('#formId').serialize(); // detect form init value after form is displayed


// check for form changes
if ($('#formId').serialize() != formInitVal) {
// show confirmation alert
}

小开

General Solution Supporting multiple forms in a given page (Just copy and paste in your project)

$(document).ready(function() {
$('form :input').change(function() {
$(this).closest('form').addClass('form-dirty');
});


$(window).bind('beforeunload', function() {
if($('form:not(.ignore-changes).form-dirty').length > 0) {
return 'You have unsaved changes, are you sure you want to discard them?';
}
});


$('form').bind('submit',function() {
$(this).closest('form').removeClass('form-dirty');
return true;
});
});

Note: This solution is combined from others' solutions to create a general integrated solution.

Features:

Just copy and paste into your app.
Supports Multiple Forms.
You can style or make actions dirty forms, since they've the class "form-dirty".
You can exclude some forms by adding the class 'ignore-changes'.

小开

In IE document.ready will not work properly it will update the values of input.

so we need to bind load event inside the document.ready function that will handle for IE browser also.

below is the code you should put inside the document.ready function.

 $(document).ready(function () {
$(window).bind("load", function () {
$("input, select").change(function () {});
});
});

小开

A lot of outdated answers so here's something a little more modern.

ES6

let dirty = false
document.querySelectorAll('form').forEach(e => e.onchange = () => dirty = true)

小开

I have found that this one works in Chrome with an exception... The messages being returned do not match those in the script:

dataChanged = 0; // global variable flags unsaved changes


function bindForChange() {
$("input,checkbox,textarea,radio,select").bind("change", function (_event) {
dataChanged = 1;
});
$(":reset,:submit").bind("click", function (_event) {
dataChanged = 0;
});
}


function askConfirm() {
if (dataChanged) {
var message =
"You have some unsaved changes.  Press OK to continue without saving.";
return message;
}
}


window.onbeforeunload = askConfirm;


window.onload = bindForChange;

The messages returned seem to be triggered by the specific type of action I'm performing. A RELOAD displays a question "Reload Site? And a windows close returns a "Leave Site?" message.