最近见到很多朋友问有关对form元素的操作问题，下面把我写的一个bbs的backoffice部分帖出来给大家。这个程序实现了对bbs中栏目及其下属论坛的增、删、改名、排序、移动、修改属性等等操作，而只与服务器交互一次，其中用到的表单元素有text , button, submit,select , textarea等，如果你能够全部理解这些代码，那么不敢说你精通javascript和dhtml（我就不敢），最起码可以说你会了。
因为是草稿，所以未进行程序优化及界面处理，实际上你如果结合css可以把它做得象一个windows程序而不象html页面。另外一条因为我是用ie5来测试的，所以其中一些写法不是很规范，如引用form名时前面没加document ， 函数没有返回值等，这些在nescape里都是不允许的，如果你要在nescape里用，请自己把语法规范了。
由于源代码很长（30000多字节），我将分为几个部分来讲，你把几部分中的代码合在一起存为一个html文件就可以直接运行了。首先需要从数据库中取出记录放到前台javascript数组中，因为着重点是放在前台，所以这里的asp我就不列出来了，只把它生成的html列出来，它的目的是生成数组及初始页面。这部分代码中牵涉到一个生成javascript二维数组的技巧，请大家仔细看一下，这是整个程序的关键所在。下面这段程序生成两个数组，一个是acategory，代表bbs大的栏目，共有四个；另一个是aforum，代表同栏目相关联的论坛。整个程序的操作实际上就是围绕着两个数组来实现的，同这两个数组相关联的是表单frmmanager的两个select ：selcategory和selforum。
<script language=javascript>
//版块数组的构造函数
function makecategory(categoryid , categoryname , ordernum)
{
this.categoryid = categoryid ;
this.categoryname = categoryname ;
this.ordernum = ordernum ;
return this ;
}
//论坛数组的构造函数
function makeforum(categoryid , categoryname , ordernum , rootcategoryid , description , masterid)
{
this.categoryid = categoryid ;
this.categoryname = categoryname ;
this.ordernum = ordernum ;
this.rootcategoryid = rootcategoryid ;
this.description = description ;
this.masterid = masterid ;
return this ;
}
//建立版块数组并赋值
var acategory = new array() ;
acategory[0] = new makecategory(1 , 技术交流 ,1) ;
acategory[1] = new makecategory(2 , 项目管理 ,2) ;
acategory[2] = new makecategory(3 , 内部公告 ,3) ;
acategory[3] = new makecategory(4 , 海阔天空 ,4) ;
//建立论坛数组并赋值
var aforum = new array() ;
aforum[0] = new makeforum(5 , asp&database ,1 ,1 ,asp, access,pb, sql.oralce,etc. ,1);
aforum[1] = new makeforum(6 , design world ,2 ,1 ,photoshop,dreamweaver,flash, 3dmax,etc.,2);
aforum[2] = new makeforum(7 , design world ,3 ,1 ,photoshop,dreamweaver,flash, 3dmax,etc.,2);
aforum[3] = new makeforum(8 , program language ,4 ,1 ,java, html/dhtml/xml, c/c++, php/jsp, vbscript/javascript, etc.,1);
aforum[4] = new makeforum(9 , system administration ,5 ,1 ,windows9x/nt/2000, unix, linux , etc.,2);
aforum[5] = new makeforum(10 , network security ,6 ,1 ,tcp/ip, socket, hacker, firewall, proxy, etc.,1);
aforum[6] = new makeforum(11 , new idea ,7 ,1 ,welcome all creative, innovative and anything different .,1);
aforum[7] = new makeforum(12 , 4biz电子商务搜索引擎门户项目 ,1 ,2 ,e-commerce search engine portal.,2);
aforum[8] = new makeforum(13 , poker town ,2 ,2 ,our first online game.,1);
aforum[9] = new makeforum(14 , vertigine ,3 ,2 ,powerful vertical search engine.,2);
aforum[10] = new makeforum(15 , easycase ,4 ,2 ,easycase-new modeling tool.,1);
aforum[11] = new makeforum(16 , 日常管理 ,1 ,3 ,daily grind.,2);
aforum[12] = new makeforum(17 , 临时通知 ,2 ,3 ,temporary notice.,1);
aforum[13] = new makeforum(18 , 会议安排 ,3 ,3 ,meeting schedule.,2);
aforum[14] = new makeforum(19 , 有感而发 ,4 ,4 ,just say it.,1);
aforum[15] = new makeforum(20 , 似水流年 ,5 ,4 ,all that gone with wind.,1);
aforum[16] = new makeforum(21 , 谈情说爱 ,6 ,4 ,let"s talk about love.,2);
aforum[17] = new makeforum(22 , 笑话站 ,7 ,4 ,just joke , whatever it is.,1);
</script>
<html>
<head>
<title>版块管理</title>
<meta http-equiv=content-type content=text/html; charset=gb2312>
<link rel=stylesheet href=images/style.css>
</head>
<body bgcolor=#ffffff onload=on_load();>
<p align=center class=bigtitle>ematters board 版块管理</p>
<form name = frmmanager method=post action=changeforum.asp>
<table width=720 border=0 align=center cellspacing=1 cellpadding=4 bgcolor=#000000>
<tr bgcolor=#ffffff>
<td width=250 align=left>
版块名称
</td>
<td width=70 align=center>
</td>
<td width=400 align=left>
论坛名称
</tr>
<tr bgcolor=#ffffff>
<td align=left>
<input type=text name=txtcategoryname size=20 value=请选择版块 disabled>
</td>
<td width=120 align=center>
<input type=button name=btnchangename value=修改名称 disabled onclick=on_changename();>
</td>
<td align=left>
<input type=text name=txtforumname size=20 value=请选择论坛 disabled>
</tr>
<tr bgcolor=#ffffff>
<td align=left>
<select name=selcategoryname size=10 width=200 onchange=on_categorychange(); style=width:120>
</select>
<input type=button name=btnaddcategory value = 增加 onclick=on_addcategory();>
<input type=button name=btndeletecategory value=删除 onclick=on_deletecategory();>
</td>
<td align=center>
<br><br>
<br><br>
<input type=button name=btnup value=↑ onclick=on_orderup()>
<br><br>
<input type=button name=btndown value=↓ onclick=on_orderdown()>
</td>
<td align=left>
<select name=selforumname size=10 onchange=on_forumchange(); style=width:200>
</select>
<input type=button name=btnaddforum value = 增加 onclick=on_addforum();>
<input type=button name=btndeleteforum value=删除 onclick=on_deleteforum();>
</tr>
<tr bgcolor=#ffffff><td colspan=2 align=left>
描述:
<textarea name=txtdescription cols=30 style=overflow:hidden></textarea>
<input type=button name=btnmodifydescription value=修改 onclick=on_changedescription()>
</td>
<td align=left>
版主
<select name=selmaster disabled>
<option value=1>bigeagle</option>
<option value=2>lizza</option>
</select>
<input type=button name=btnchangemaster value=修改 onclick=on_changemaster()>
</td></tr>
<tr bgcolor=#ffffff>
<td colspan=3 align=left>
<input type=button name=btnsubmit value=确认 onclick=on_submit();>
</td>
</tr>
</table>
</form>
</body></html>
文章整理：西部数码--专业提供域名注册、虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!
