大表格,多Form元素的提交 判断表单数据是否有被修改过

本文介绍了一种基于客户端和服务器端的表单数据同步机制,实现数据的自动更新及提交功能。通过JavaScript进行前端数据收集与处理,并利用ASP进行后端数据接收与更新。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

/*
FileName:Client.js
version:0.3
2006-02-13
*/

//页面载入后 执行下面代码 初始化变量,并记录原始通道状态

//建立公共变量
var o_d;
var xmlRes;


var list_tbody = list_table.children.item(0).children;
var list_count = list_tbody.length; //当前页通道总数
list_count--;
list_count--;

//建立数组

var inputs = new Array(list_count)
for(i=0;i<list_count;i++){
 inputs[i] = getn(list_tbody.item(i+1),"input"); //每行的Form控件组
 getn(list_tbody.item(i+1),"select");
}

var n = new Array(list_count);
var o = new Array(list_count);
for (i=0;i<list_count;i++){
 n[i] = new Array(inputs[0].length);
 o[i] = new Array(inputs[0].length);
}

var _flag = new Array(list_count);


for(i=0;i<list_count;i++){
 _flag[i] = list_tbody.item(i+1).children.item(0).innerText; //记录标志

 for(j=0;j<inputs[0].length;j++){
  if(inputs[i][j].tagName == "INPUT"){
   switch (inputs[i][j].type){
    case ""||"text"||"textarea"||"password"||"radio" : o[i][j] = inputs[i][j].defaultValue;break;
    case "checkbox" : o[i][j] = inputs[i][j].checked;break;
    default : o[i][j] = inputs[i][j].value;break;
   }
  }else{ //不是input 就是select
   o[i][j] = inputs[i][j].options[inputs[i][j].selectedIndex].value;
  }
 }
}


//IsModified 判断表单数据是否有被修改过
function IsModified(){
 for(i=0;i<list_count;i++){
  for(j=0;j<inputs[0].length;j++){
   if(inputs[i][j].tagName == "INPUT"){
    switch (inputs[i][j].type){
     case ""||"text"||"textarea"||"password"||"radio" : n[i][j] = inputs[i][j].value;break;
     case "checkbox" : n[i][j] = inputs[i][j].checked;break;
     default : n[i][j] = inputs[i][j].value;break;
    }
   }else{ //不是input 就是select
    n[i][j] = inputs[i][j].options[inputs[i][j].selectedIndex].value;
   }
  }
 }
 var Resault = false; //是否修改的标志,初始化为真
 for(i=0;i<list_count;i++){ //开始比较
  //如果该行有一个表单被修改,设置修改标志为真,并返回
  for(j=0;j<inputs[0].length;j++){
   if(n[i][j]!=o[i][j]){Resault=true;}
   if(Resault){break;}
  }
 }
 return Resault;
}

//getn  根据tag返回对象的子对象集合
/*
p:指定对象
s:tag
*/
function getn(p,s){return p.getElementsByTagName(s);}

//gen  根据tag生成并返回一个网页元素
/*
s:tag
*/
function gen(s){return document.createElement(s);}

function takeit(){
 if (!IsModified())
 {
  alert("当前并未修改任何数据,不需要提交!");
 }else{
  CreateDIV(); //遮罩层
  CreateDOM(); //组织和提交数据
 }
 return false;
}

function CreateDIV(){
 var ClientWidth = document.body.scrollWidth;
 var ClientHeight = document.body.scrollHeight;

 //开始生成透明遮罩层(用于禁止页面操作)
 var nDIV = gen("DIV"); //生成一个div层(用于透明效果)
 nDIV.style.position="absolute"; //设置层的定位方式
 nDIV.style.zIndex="1";
 nDIV.style.pixelLeft="0";
 nDIV.style.pixelTop="0";
 nDIV.style.pixelWidth=ClientWidth;
 nDIV.style.pixelHeight=ClientHeight;
 nDIV.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; //设置不透明度

 var nFrame=gen("IFRAME"); //生成一个新的iFrame(用于遮盖控件)
 nFrame.frameBorder="0";
 nFrame.style.pixelLeft="0";
 nFrame.style.pixelTo="0";
 nFrame.style.pixelWidth=ClientWidth;
 nFrame.style.pixelHeight=ClientHeight;
 nDIV.appendChild(nFrame);

 document.body.appendChild(nDIV); //实例化

 //开始生成文档数据显示层
 var dDIV=gen("DIV"); //生成一个div层(用于显示文档数据)
 dDIV.style.position="absolute";
 dDIV.style.zIndex=2;
 dDIV.style.pixelWidth="420";
 dDIV.style.pixelHeight="80";
 dDIV.style.pixelLeft=(ClientWidth-dDIV.style.pixelWidth)/2;
 dDIV.style.pixelTop=(ClientHeight-dDIV.style.pixelHeight)/2;

 var dTable=gen("TABLE"); //生成一个Table(用于格式化显示文档数据)
 var dTbody=gen("TBODY")
 var dTr=gen("TR");
 var dTd=gen("TD");
 dTd.style.pixelWidth=dDIV.style.pixelWidth;
 dTd.style.pixelHeight=dDIV.style.pixelHeight;
 dTd.style.pixelLeft=dDIV.style.pixelLeft;
 dTd.style.pixelTop=dDIV.style.pixelTop;
 dTd.align="center";
 dTd.vAlign="middle";
 dTd.style.backgroundColor="#AAAAAA";
 dTd.style.border="1px solid #000000";
 dTd.style.color="#FFFFFF";
 dTd.innerHTML="正在更新数据...请稍后...";
 dTr.appendChild(dTd);
 dTbody.appendChild(dTr);
 dTable.appendChild(dTbody);
 dDIV.appendChild(dTable);

 document.body.appendChild(dDIV); //实例化

 o_d = dTd; //将数据层对象传递到公共变量
}

function CreateDOM(){
 var DOM = new ActiveXObject("MSXML2.DOMDocument");
 DOM.async=false;
 DOM.resolveExternals=false;
 //构造XML文件头
 var Node=DOM.createProcessingInstruction("xml","version='1.0'");
 DOM.appendChild(Node);
 Node=null;
 //构造Root节点
 var Root=DOM.createElement("Root");
 //加入Root节点
 DOM.appendChild(Root);
 //循环构造List节点
 for(i=0;i<list_count;i++){
  var Resault = false; //该行是否有改动的标志
  for(j=0;j<inputs[0].length;j++){
   Resault=n[i][j]!=o[i][j]?true:false;
   if(Resault){break;}
  }
  if(Resault){ //如果有改动
   var List = DOM.createElement("List");

   //加入flag属性
   var _Flag = DOM.createAttribute("_Flag");
   _Flag.value = _flag[i]
   List.setAttributeNode(_Flag)

   //循环加入每个属性
   for(j=0;j<inputs[0].length;j++){
    var newAttributeName = "AN" + j; //生成一个属性名
    var N = DOM.createAttribute(newAttributeName);
    if(typeof(n[i][j])=="boolean"){
     N.value = n[i][j]?"true":"false";
    }else{
     N.value = n[i][j];
    }
    List.setAttributeNode(N);
   }
   Root.appendChild(List);
  }
 }
 var xmlHTTP=new ActiveXObject("Microsoft.XMLHTTP");
 xmlHTTP.open("POST","Channel_List_xml.asp",false);
 xmlHTTP.send(DOM);
 xmlRes=xmlHTTP.responseText;
 CallBack();
}

function CallBack(){
 o_d.innerHTML=xmlRes+"<P>3秒后页面将刷新...</P>";
 setTimeout("window.location.href=window.location.href",3000);
}

function Delete(id){
 if(!confirm("警告!/n/n即将删除一条数据!!  此操作不可恢复!!/n/n是否继续?")){return}

 var nForm = gen("FORM");
 nForm.method="post";
 nForm.action=window.location.href;
 nForm.target="_self";

 //action=delete
 var fAction=gen("INPUT");
 fAction.type="hidden";
 fAction.name="action";
 fAction.value="delete";
 nForm.appendChild(fAction);

 //id=id
 var fId=gen("INPUT");
 fId.type="hidden";
 fId.name="id";
 fId.value=id;
 nForm.appendChild(fId);

 document.body.appendChild(nForm);
 nForm.submit();
}

//------------------------------------------------------------------------------
FileName:Server.asp
version:0.03
仅Alpha版 无实用价值
//------------------------------------------------------------------------------

<!--#include file="inc/Class.asp"-->
<%
Response.CodePage=65001
Response.Expires = 0

If Not Admin.CheckPower(1) Then Response.Redirect "Error.asp":Response.End

Set DOM=Server.CreateObject("MSXML2.DOMDocument")
DOM.load(Request)
Dim oRoot
Set oRoot = DOM.selectSingleNode("//Root") '根节点

Dim ChannelCount '需要更新的用户总数
ChannelCount = oRoot.childNodes.length

Dim ID,Name,Price,Disable
Dim Res,ResCount
Res = 0
ResCount = 0

Dim BackString '用于返回到客户端
BackString="<DIV style='margin-top:10px;' align='left'><UL>"
On Error Resume Next

Dim Sql,i
 '开始更新
DB_Connect
For i=0 To ChannelCount-1
 ID = Str_Fix(oRoot.childNodes(i).getAttribute("_Flag"))
 Name = Str_Fix(oRoot.childNodes(i).getAttribute("AN0"))
 Price = Fix_Money(oRoot.childNodes(i).getAttribute("AN1"))
 Disable = Eval(Str_Fix(oRoot.childNodes(i).getAttribute("AN2")))
 If Disable Then Disable = 1 Else Disable = 0

 Sql="Update [Channel] Set [Name]='"&Name&"',[Disabled] ="&Disable
 If Price<>-1 Then Sql = Sql &",[Def_Price]="&Price '如果默认价格为0 或为空 或填写了非数字值 则不更新此字段
 Sql = Sql & " WHERE [id] ="&ID
 
 Conn.Execute Sql,Res
 ResCount = ResCount + Res
Next
DB_DisConnect

BackString = BackString & "<LI>需要更新<Font color=red>&nbsp;"&ChannelCount&"&nbsp;</Font>通道数据</LI>"
'BackString = BackString & "<LI>"&Sql&"</LI>"
'BackString = BackString & "<LI>"&Res&"</LI>"
If ResCount>0 Then
 BackString = BackString & "<LI>已成功更新了<Font color=red>&nbsp;"&ResCount&"&nbsp;</Font>通道数据</LI>"
Else
 BackString = BackString & "<LI>没有更新任何通道数据!</LI>"
End If

If Err Then
 BackString = BackString & "<LI>更新过程发生错误!错误信息如下:<BR>" & Err.Raise & "</LI>"
End If

Response.write BackString & "</UL></DIV>"
%>

 

本文来自优快云博客,转载请标明出处:http://blog.youkuaiyun.com/mgzhenhong/archive/2006/02/15/599335.aspx

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值