编辑表单后离开本页面时做提示(jQuery版)

添加如下JavaScript：

$.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;
}

上面的代码将表单的原始值以一个名为"_value"的attr保持在input和select标签上
window.onbeforeunload时判断form是否更改过并给出提示。

需要在具体某个页面里添加如下代码来绑定表单原始值:

$().ready(function() {
	$('form').enable_changed_form_confirm();
});

评论

4 楼 bosschen 2013-11-05  

试试 看能不能用

3 楼 birdjavaeye 2008-07-21  

还是太复杂。当时在CMS上用得方法是，页面onload时，用jquery的一个叫啥子的函数（忘了）把form编码成字符串，存在一个变量里。然后在 onbeforeunload中再次编码，判断不等，就提示。

2 楼 hideto 2007-11-17  

nice, thx!

1 楼 jctr 2007-11-16  

jQuery支持多个DOM一起选择，不介意我帮您做了简单的修改，但愿意没变，其实我一直关注您在RoR方面的文章。

 $.fn.enable_changed_form_confirm = function () {  
     var _f = this;
	 $(':text, :password, textarea', this).each(function() {  
         $(this).attr('_value', $(this).val());  
     });

     $(':checkbox, :radio', this).each(function() {  
         var _v = this.checked ? 'on' : '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;  
     $(':text, :password, textarea', f).each(function() {  
         var _v = $(this).attr('_value');  
         if(typeof(_v) == 'undefined')   _v = '';  
         if(_v != $(this).val()) changed = true;  
     });  
 
     $(':checkbox, :radio', f).each(function() {  
         var _v = this.checked ? 'on' : 'off';
         if(_v != $(this).attr('_value')) changed = true;  
     });  
  
     $('select', f).each(function() {  
         var _v = $(this).attr('_value');  
         if(typeof(_v) == 'undefined')   _v = '';  
         if(_v != this.options[this.selectedIndex].value) changed = true;
     });  
     return changed;  
 }




 $(function() {  
     $('form').enable_changed_form_confirm();  
 });