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

关注

转载最新推荐文章于 2025-05-16 13:43:13 发布 2.4k 阅读 AI 写同款· GEO 优化 ›

js_06 表单案例文章目录1.表单增加功能2.表单删除功能3.表单修改功能4.表单确定功能 1.表单增加功能获取要操作的表格。开始增加行：增加的行的位置在表格的倒数第二行，下标：总行数-1。空行获取表格行目前的最大下标给新增加的行对象 newRow添加 id属性往空行里面增加4个列 // 增加行 var myTable = document.getElementById("order"); function addRow(){ var row 阅读详情

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);
}
};