jQuery检测表单改动 隐藏域hidden 触发onchange事件

 

需求：要作一个草稿保存功能，点击保存时，若表单数据有改动，则用ajax提交处处理程序，无数据改动里，提示无数据更新，无须保存，不提交。

解决思路：使用jquery给表单的每个元素加上change监听事件，当值发生变化时，用data()方法在表单保存一个表单修改的标识

当用户提交的时候根据表单保存的标识判断表单的内容是否有更新，成功提交后，重置标识

对于隐藏域hidden没法触发onchange的解决方法：在更改此隐藏域的时候，调用下它的onchange方法，使用jquery的话， 就直接加上 $("#hiddenid").change();

实现页面只有一个表单 id 为form，有若干input,编辑器

$(document).ready(function() { //监听表单input元素的值变化

$(":input").change(function (){ $('#form').data('changed',true); }); //若是使用到编辑器，请调用编辑器中的监听方法

//我在项目中在一个textarea中绑定了百度的编辑器

//这里的处理是，认为只要在编辑器中有键盘操做就有更新，此作法不够精确

editor.addListener('keyup',function(){ $('#form').data('changed',true); }); }); //提交前作判断

if(!$('#form').data('changed')) { alert('公告无更新，无需保存'); return false; } //成功提交处理后重置修改标识 $('#form').data('changed',false);

在使用过程当中，最重要的步骤是处理隐藏域和编辑器

 

总结：对于隐藏域hidden没法触发onchange的解决方法：在更改此隐藏域的时候，调用下它的onchange方法，使用jquery的话， 就直接加上 $("#hiddenid").change();

若是给表单添加了change事件，那么hidden表单的值变化了以后主动调用change()函数便可。

来源：http://blog.sina.com.cn/s/blog_7cc04ac801012an3.html