用JavaScript 记录用户在表单中所作的修改

TrackChanges.js：用JavaScript 记录用户在表单中所作的修改

原理：
1.为form 中的每个field (submit/reset/button/image除外)生成一个虚假的INPUT element，用于保存页面装载时form 中每个element的初始值。

2.在form 提交之前，比较form 中的每个field 与上面一步生成的虚假的INPUT element，记录二者的差别(diff)。然后合并所有的差别并赋值到另一个新的INPUT element中。

这样，用户在前台操作过程中所修改的内容就可以随form 一起提交到服务器端进行处理了。

1. trackChange.js

/**********************************************************
TrackChanges v0.1 By lhelper <lhelper at gmail dot com>

track changes of client end form fields
1. append dummy input fields onto the raw form, which has
the origianl value, checked status, etc. as the real one

2. compare the dummy input fields with the originals, record
the changes (unix/linux diff format) with one more real
field, whose name is '_tc_c' (default)
**********************************************************/
var TrackChanges={
initialize : function _init(frm) {
if(!frm) { // smart check
return;
}
var eles=frm.elements;
for(var i=0, n=eles.length; i<n; i++) {
var ele=eles[i];
// alert(ele.tagName + ":" + ele.type + ":" + ele.name + ":" + ele.value);
// 1. omit the submit button (submit, reset, button, image, etc.)
if(ele.tagName=="INPUT") {
if(ele.type=="submit" ele.type=="reset" ele.type=="button" ele.type=="image") {
continue;
}
if(ele.type!="checkbox" && ele.type!="radio" && document.getElementsByName(ele.name).length > 1) {
alert("There are " + document.getElementsByName(ele.name).length + " field elements with the same name (" + ele.name + "), which can result in unbelievable output!");
return false;
}
}

// 2. append dummy field _tc_f[ele.name][ele.id][0] onto the form
var obj=document.createElement("INPUT");
obj.type="hidden";
//obj.type="text";
if(ele.tagName=="INPUT" && (ele.type=="checkbox" ele.type=="radio")) {
if(!ele.id) {
ele.id=ele.name + "_" + ele.value;
}
obj.name="_tc_f[" + ((ele.type=="checkbox") ? "checkbox" : "radio") + "][" + ele.name + "][" + ele.id + "][0]";
obj.checked=ele.checked;
} else {
if(!ele.id) {
ele.id=ele.name;
}
obj.name="_tc_f[input][" + ele.name + "][" + ele.id + "][0]";
}
obj.value=ele.value;
obj.disabled=true;
frm.appendChild(obj);
}
},

recordChanges : function _diff(frm, fn) {
if(!frm) { // smart check
return;
}
var cmsDiff="";
for(var eles=frm.elements, i=0; i<eles.length; i++) {
var re=new RegExp("_tc_f\\[(.*?)\\]\\[(.*?)\\]\\[(.*?)\\]\\[0\\]");
var m=re.exec(eles[i].name);
if(m == null) {
continue;
}
if(m[1] == "checkbox" m[1] == "radio") {
if(document.getElementById(m[3]).checked != eles[i].checked) {
cmsDiff+="< " + m[3] + ":" + eles[i].checked + "\n----------\n" + "> " + m[3] + ":" + !eles[i].checked + "\n\n";;
}
} else {
if(document.getElementById(m[3]).value != eles[i].value) {
cmsDiff+="< " + m[3] + ":" + eles[i].value + "\n----------\n" + "> " + m[3] + ":" + document.getElementById(m[3]).value + "\n\n";;
}
}
}
//alert(cmsDiff);
var obj=document.createElement("INPUT");
obj.type="hidden";
//obj.type="text";
obj.name=(fn) ? fn : "_tc_c";
obj.value=cmsDiff;
frm.appendChild(obj);
}
};

2. 使用方法：

<script language=JavaScript>
<!--
function _submit(frm) {
// 记录用户修改的内容
TrackChanges.recordChanges(frm);

frm.method="post";
frm.action="news_edit_save.jsp";
return true;
}
// -->
</script>
......

<form method="POST" action="/dev/null" name="news_info" onSubmit="return _submit(this)">
<input type="text" name="news_title" maxlength="50" value="">
......
<input type="submit" value="确认录入" name="btnSave" class="submit">
</form>

<script language="javascript">
<!-- //
// 初始化 TackChanges
TrackChanges.initialize(document.news_info);
// -->
</script>