`
zendj
  • 浏览: 121985 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

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

分享到:
评论

相关推荐

    Javascript 动态添加表单实例

    在JavaScript编程中,动态添加表单是一项常见的需求,特别是在构建具有高度交互性和可扩展性的Web应用时。通过动态创建和管理表单元素,开发者可以轻松应对用户可能的需求变化,实现XML数据的加载和显示,从而增强...

    javascript网页制作彻底研究源代码

    JavaScript是Web开发中不可或缺的一部分,尤其在网页制作中发挥着至关重要的作用。陈会安著的《javascript网页制作彻底研究》一书,深入浅出地介绍了JavaScript的核心概念和技术,为读者提供了全面的学习资源。该书...

    表单删除修改增加插件.rar

    表单修改功能允许用户在已填写的信息基础上进行更新。这通常涉及到获取当前表单数据,显示给用户,并允许他们在需要的地方进行更改。在实现这一功能时,开发者需要考虑如何处理用户的修改请求,确保数据安全地更新到...

    javaScript拖曳流程实现

    JavaScript拖曳流程实现是一种在Web应用中创建交互式工作流的方法,它允许用户通过直观的拖放操作来配置和管理任务流程。这种技术通常用于项目管理、任务分配、流程建模等领域,为用户提供了一种无需编写代码即可...

    js修改绑定手机号码表单代码.zip

    总的来说,这个压缩包提供的代码实例是一个完整的手机号码修改功能,涵盖了前端验证、后台交互和用户体验优化等多个方面,对于学习和理解JavaScript在实际项目中的应用非常有价值。开发者可以通过研究这个例子,掌握...

    JAVA动态表单设计,自定义表单,自定义数据

    这样,当需要修改表单时,只需更新数据库中的记录,无需修改源代码。数据库存储还能支持多版本管理,方便回滚到之前的表单设计。 3. **设计服务器(design-server)** 这个模块可能包含了处理动态表单设计请求的...

    防止用户表单重复提交处理

    在Web开发中,用户表单重复提交是一个常见的问题,它可能导致数据冗余或者数据库状态的不一致。本示例提供了一种解决方案,包括在前端JavaScript和后端进行处理,以防止用户因网络延迟或误操作导致的多次提交。 ...

    jQuery-分步骤网站用户注册表单模板

    在每个步骤中,我们可以使用`.val()`方法获取用户输入的值,并通过条件判断进行数据验证。例如,检查邮箱格式是否正确、密码是否符合强度要求等。如果验证失败,可以通过添加`.error`类或者自定义样式来提示用户。 ...

    form表单拖拽功能

    在网页设计中,表单(Form)是收集用户信息的重要工具。为了提升用户体验,许多现代网页应用中都引入了表单元素的拖拽功能。本文将深入探讨"form表单拖拽功能"这一主题,结合提供的文件"FormbuildV1.0",详细解释其...

    记录我的旅程之JavaScript Dom系列里面的所有例题

    在这个“记录我的旅程之JavaScript DOM系列”中,我们深入探讨了一系列与DOM相关的例题,这些例题旨在帮助开发者更好地理解和掌握DOM操作技巧。 首先,我们要了解DOM的基本概念。DOM是一个树形结构,它将网页内容...

    JavaScript判断用户是否对表单进行了修改的方法

    在JavaScript中,判断用户是否对表单进行修改的方法通常是通过比较表单元素当前的值与其初始默认值来实现的。这个功能在用户可能需要保存未完成的编辑时尤其有用,例如在用户离开页面或关闭浏览器时提醒他们。下面将...

    后台layui表单生成器代码复制即用,添加编辑一体,可条件判断

    这通常是通过切换表单的编辑模式来实现的,比如点击行操作的“编辑”按钮,表单就会加载对应记录的数据,用户可以进行修改并提交。 “可条件判断”意味着在生成表单时,可以根据特定条件显示或隐藏某些字段,或者...

    区块链上的电子健康记录-JavaScript-HTML-下载

    在电子健康记录系统中,用户的个人信息和健康数据需要经过加密处理,确保即使数据被截取,也无法被解析。此外,系统可能还采用了公钥/私钥对,使得只有拥有对应私钥的用户才能解密和访问自己的记录。 4. **前端交互...

    javascript案例百宝箱

    3. **表单验证**:在提交表单前,JavaScript可以实时验证用户输入的数据,如邮箱格式、手机号码、密码强度等,提供良好的用户体验。 4. **Ajax异步通信**:Ajax允许页面在不刷新的情况下与服务器交换数据并局部更新...

    c#表单修改

    在这个场景下,"c#表单修改"可能指的是在这些环境中对用户界面(UI)的更新、数据验证、以及与后端数据库的交互。 首先,`StoreFieldData.ashx`、`SZ_FCLE001B001.ashx`和`UpdateActiveid.aspx`是ASP.NET的HTTP处理...

    bank.rar_registry javascript

    在银行系统的开发中,"registry javascript" 这一标签暗示了我们主要关注的是与注册(registry)相关的前端功能实现,特别是使用JavaScript语言进行的。银行系统通常涉及到用户账户管理,其中包括用户登录、删除和...

    网页编程JAVASCRIPT实例代码

    通过学习这些实例,我们可以深入理解JavaScript在网页开发中的各种用途,包括事件处理、DOM操作、表单验证、动画效果等。同时,也能体会到JavaScript如何与HTML和CSS紧密结合,创造出丰富多样的用户体验。对于初学者...

    javaScript学习笔记总结.docx

    2. 表单验证:在用户提交表单前,JavaScript可以检查数据的有效性和格式,提供即时反馈。 JavaScript的书写位置有三种: 1. 内嵌式:直接将JavaScript代码写在HTML文件中。 2. 外链式:将JavaScript代码放在独立的....

    使用 JavaScript 编写的书店源代码.zip

    用户可以添加图书详细信息的数量,您可以看到存储在列表表单中的详细信息。如果用户想要删除列表项,可以删除它。 项目制作 Book Store 项目仅包含 HTML、CSS 和 JavaScript。谈到该系统的功能,用户可以列出书籍...

    javascript加强

    `history`对象管理用户的历史浏览记录,`links`、`anchors`和`forms`分别用于处理页面中的链接、锚点和表单。 `window`对象拥有许多常用的方法,例如`alert()`用于弹出警告对话框,`prompt()`用于获取用户输入,`...

Global site tag (gtag.js) - Google Analytics