用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>