添加如下JavaScript:
[code]
$.fn.enable_changed_form_confirm = function () {
var _f = this;
$('input[@type=text]', this).each(function() {
$(this).attr('_value', $(this).val());
});
$('input[@type=password]', this).each(function() {
$(this).attr('_value', $(this).val());
});
$('textarea', this).each(function() {
$(this).attr('_value', $(this).val());
});
$('input[@type=checkbox]', this).each(function() {
var _v = '';
if(this.checked == true) {
_v = 'on';
} else {
_v = 'off';
}
$(this).attr('_value', _v);
});
$('input[@type=radio]', this).each(function() {
var _v = '';
if(this.checked == true) {
_v = 'on';
} else {
_v = 'off';
}
$(this).attr('_value', _v);
});
$('select', this).each(function() {
$(this).attr('_value', this.options[this.selectedIndex].value);
});
$(this).submit(function() {
window.onbeforeunload = null;
});
window.onbeforeunload = function() {
if(is_form_changed(_f)) {
return "You will lose any unsaved content.";
}
}
}
function is_form_changed(f) {
var changed = false;
$('input[@type=text]', f).each(function() {
var _v = $(this).attr('_value');
if(typeof($(this).attr('_value')) == 'undefined') {
_v = '';
}
if(_v != $(this).val()) {
changed = true;
}
});
$('input[@type=password]', f).each(function() {
var _v = $(this).attr('_value');
if(typeof($(this).attr('_value')) == 'undefined') {
_v = '';
}
if(_v != $(this).val()) {
changed = true;
}
});
$('textarea', f).each(function() {
var _v = $(this).attr('_value');
if(typeof($(this).attr('_value')) == 'undefined') {
_v = '';
}
if(_v != $(this).val()) {
changed = true;
}
});
$('input[@type=checkbox]', f).each(function() {
var _v = '';
if(this.checked == true) {
_v = 'on';
} else {
_v = 'off';
}
if($(this).attr('_value') != _v) {
changed = true;
}
});
$('input[@type=radio]', f).each(function() {
var _v = '';
if(this.checked == true) {
_v = 'on';
} else {
_v = 'off';
}
if($(this).attr('_value') != _v) {
changed = true;
}
});
$('select', f).each(function() {
var _v = $(this).attr('_value');
if(typeof($(this).attr('_value')) == 'undefined') {
_v = '';
}
if(_v != this.options[this.selectedIndex].value) {
changed = true;
}
});
return changed;
}
[/code]
上面的代码将表单的原始值以一个名为"_value"的attr保持在input和select标签上
window.onbeforeunload时判断form是否更改过并给出提示。
需要在具体某个页面里添加如下代码来绑定表单原始值:
[code]
$().ready(function() {
$('form').enable_changed_form_confirm();
});
[/code]
[code]
$.fn.enable_changed_form_confirm = function () {
var _f = this;
$('input[@type=text]', this).each(function() {
$(this).attr('_value', $(this).val());
});
$('input[@type=password]', this).each(function() {
$(this).attr('_value', $(this).val());
});
$('textarea', this).each(function() {
$(this).attr('_value', $(this).val());
});
$('input[@type=checkbox]', this).each(function() {
var _v = '';
if(this.checked == true) {
_v = 'on';
} else {
_v = 'off';
}
$(this).attr('_value', _v);
});
$('input[@type=radio]', this).each(function() {
var _v = '';
if(this.checked == true) {
_v = 'on';
} else {
_v = 'off';
}
$(this).attr('_value', _v);
});
$('select', this).each(function() {
$(this).attr('_value', this.options[this.selectedIndex].value);
});
$(this).submit(function() {
window.onbeforeunload = null;
});
window.onbeforeunload = function() {
if(is_form_changed(_f)) {
return "You will lose any unsaved content.";
}
}
}
function is_form_changed(f) {
var changed = false;
$('input[@type=text]', f).each(function() {
var _v = $(this).attr('_value');
if(typeof($(this).attr('_value')) == 'undefined') {
_v = '';
}
if(_v != $(this).val()) {
changed = true;
}
});
$('input[@type=password]', f).each(function() {
var _v = $(this).attr('_value');
if(typeof($(this).attr('_value')) == 'undefined') {
_v = '';
}
if(_v != $(this).val()) {
changed = true;
}
});
$('textarea', f).each(function() {
var _v = $(this).attr('_value');
if(typeof($(this).attr('_value')) == 'undefined') {
_v = '';
}
if(_v != $(this).val()) {
changed = true;
}
});
$('input[@type=checkbox]', f).each(function() {
var _v = '';
if(this.checked == true) {
_v = 'on';
} else {
_v = 'off';
}
if($(this).attr('_value') != _v) {
changed = true;
}
});
$('input[@type=radio]', f).each(function() {
var _v = '';
if(this.checked == true) {
_v = 'on';
} else {
_v = 'off';
}
if($(this).attr('_value') != _v) {
changed = true;
}
});
$('select', f).each(function() {
var _v = $(this).attr('_value');
if(typeof($(this).attr('_value')) == 'undefined') {
_v = '';
}
if(_v != this.options[this.selectedIndex].value) {
changed = true;
}
});
return changed;
}
[/code]
上面的代码将表单的原始值以一个名为"_value"的attr保持在input和select标签上
window.onbeforeunload时判断form是否更改过并给出提示。
需要在具体某个页面里添加如下代码来绑定表单原始值:
[code]
$().ready(function() {
$('form').enable_changed_form_confirm();
});
[/code]