分享
 
 
 

如何实现动态添加Html文档中Form项

王朝html/css/js·作者佚名  2006-12-16
窄屏简体版  字體: |||超大  

大家好,今天和大家谈谈如何用ASP来实现动态的添加Html文档中Form项的问题。如果你对Html比较熟悉的话肯定知道有个<form></form>的HTML标记。在<form>与</form>之间有诸如类型(type)为Text、Password、Button、Submit、Reset等的标记(元素)。我们这里所说的动态的添加Form项就是指动态的添加<Form></Form>中的Text元素。那么如何去实现动态的添加Form项呢?

我们先分析分析实现动态添加form项的思路。

如果是让您自己或用诸如FrontPage、DreamWeaver静态编写Html文档来增加一个又一个类型为text的form元素的话。您肯定是写完第一个类型为text的form元素后,再会加入第二个类型为text的form元素,就这样一直加到满足数目条件为止。我们先不说在加一个新的类型为text的元素时,应该将已经存在且有内容、类型也为text的其他form元素也显示出来。上面所说的通过静态编写Html文档来增加类型为text的form元素的方法,其实就是我们在ASP程序文件中实现动态添加类型为text的form元素的基本思路。如何去得到已经存在且有内容、类型也为text的其他form元素的内容呢?在ASP程序中通过request.form("TextFieldName")可以得到。其中的"TextFieldName"是指<form></form>中名字为"TextFieldName"的项。就是指<form><input type=text name=

"TextFieldName"></form>中的"TextFieldName"。

现在我们知道如何得到了表单的内容了,那么我们就可以通过这种方法来得到已经存在且有内容、类型为text的form元素的值了。再在显示这些已经有值的text项时,我们就可以把所得到的值赋给相应的项。接下来,我们又会想如何去知道一共有多少个有内容、类型为text的form项呢?我们可以通过以下这种方法来得到。那就是通过request.form("TextFieldName")的Count属性来得到。这是因为在得到表单中多个类型为Text并且同名的form元素时,我们能得到的是一组值,也就说它们的值是放在一个名为TextFieldName的集合之中。而此时的count属性就是统计这个集合中同类元素的数目的,这样我们就可以知道一共有多少个这样的类型为text的form元素了,并且可以用循环语句与count属性取出集合各自的值。您可能会问:那么我们又如何才能得到这个集合中每一个名为TextFieldName类型为text的form的元素的值呢?在此之前我们先定义一个变量I,它的初始值为1,其实这个变量I就是我们在做循环时的变量。接下来我们就可以通过request.form("TextFieldName")(I)的方法来获取每一个名为TextFieldName的类型为text的form元素的值了。还有一点要注意,就是我们在将已经有值、类型也为text的form元素的值取出赋给相应项并显示出来的时候,我们还应该再增加一个新的类型为text的form项。为什么呢?这是为了让我们还可以再接着继续添加新的值。不然的话,在取出所有已经有值的类型为text的form元素后,您就没有继续添加新值的地方了,那也就成不了动态添加Html文档中Form项了。所以呢,您一定不能忘记这很重要的一点。现在我们知道如何取得这些满足条件的类型为text的form的元素数目了,也知道如何分别获取它们各自的值了。那么我又如何去控制只仅仅将已经有值、类型为text的form的元素呢?以及我们倒底如何去实现上面所说的一切呢?那么接下来我会给出它的源代码,并且会在有些地方加上注释或给出解释。

'/*DynamicAddForm.asp文件的源代码开始点*/

<%@ Language=VBScript %>

<%

'----------------------------------------------

'Author : WaiWai(歪歪)

'Created Date : 2000-2-20

'File Name : DynamicAddForm.ASP

'Description : Dynamic Add Form's Text Fields.

'All Rights Reserved.所有权归City Club.

'----------------------------------------------

%>

<HTML>

<HEAD>

<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">

<title>Dynamic Add Form Text Elements.</title>

<style type="text/css">

<!--

td { font-size: 9pt}

body { font-size: 9pt}

select { font-size: 9pt}

A {text-decoration: none; color: #003366; font-size: 9pt}

A:hover {text-decoration: underline; color: #FF0000; font-size: 9pt}

-->

</style>

</HEAD>

<BODY>

<table border="1" cellspacing="0" height=400 width=98% bordercolorlight="#5E5E00" bordercolordark="#FFFFEC" bgcolor=LightGrey align=center valign=top>

<%

if trim(Request.Form("List")) = "显示已有项" then

'/*其中的trim()函数是去掉Request.Form("List")两边的空格*/

'/*当您点击了名为"显示已有项"的按钮时,我们将会看到所有已经有值的类型为text的form项*/

Response.Write "<td><form><center>已经存的元素内容是:" & "</td><tr>"

for I = 1 to Request.Form("items").Count '/*已经存在的Text类型的数目*/

Response.Write "<td align=center>" & Request.Form("items")(I) & "</td><tr>"

next

if trim(Request.Form("newItem"))<>"" then

Response.Write "<td align=center>" & trim(Request.Form("newItem")) Response.write "<input type=button name='Back' value='Back' Response.write "style='font-size:12pt' onClick='window.history.back()'>

'/*点击了<Back>按钮后就会返回上一页,也就是添加类型为text的Form项所在的页*/

Response.write "</form></td><tr>"

end if

else '/*此时表明用户是点击了名为"添加"按钮,要进行添加操作*/

Response.Write "<td align=center><form action=DynamicAddForm.asp method=post></td>"

for I = 1 to Request.Form("items").Count

'/*此时的操作是循环显示出已经存在且产有值的类型为text的form元素*/

'/*Request.Form("items").Count为已经存在的Text类型的数目*/

'/*我们可以在此处加入对所添加内容的条件判断。如判断所添加内容的长度是否小于3等.*/

Response.Write "<td align=center><input type=text name=items value='"

Response.write Request.Form("items")(I) & "'></td><tr>"

'/*此步是将所得到某一有值的类型为text的form元素的值显示出来*/

next

if trim(Request.Form("newItem")) <> "" then

'/*此步的目的是检查是否用户在添加新的类型为text的form元素处有没有添加新值,*/

'/*有则将此值赋给name=items的类型为text的form元素,并显示出来。*/

Response.Write "<td align=center><input type=text name=items value='"

Response.Write trim(Request.Form("newItem")) & "'"

Response.Write "><br></td><tr>"

Response.Write "<td align=center><input type=text name=newItem" Response.write "value=''></td><tr>"

'/*此处是添加一个名为newItem类型为text的form元素,让用户可以继续进行添加操作。*/

else

'/*此时表明用户在添加新的类型为text的form元素处并没有添加新的值,所以就只能列出*/

'/*一个名为newItem类型为text的form元素,让用户可以继续进行添加操作。*/

Response.Write "<td align=center><input type=text name=newItem value=''></td>"

end if

%>

<tr><td align=center><br>

<input type=submit name="List" value="显示已有项" style="font-size:12pt">

<input type=submit name="Add" value="添加" style="font-size:12pt">

</form>

</td>

<%

end if

%>

</table>

</BODY>

</HTML>

'/*DynamicAddForm.asp文件的源代码结束点*/

您在看了这些源代码后,可能会注意到有两个类型都为text的form项元素:一个名字为items、一个名字为newItem。为什么呢?这是因为我们要区别哪些是用户通过点击<添加>按钮、并且输入了新值后得到的,哪些是我们为了让用户能够有地方可以输入新值的类型为text的form项元素。这样我们就能很清楚的在循环时只列出用户已经添加的、有值的类型为text的form项元素了。这就是我们为什么把它们命名成不同的名字的缘故,是不是很妙呢?呵呵 :-)。其实这种方法的关键在于利用了request.form("TextFieldName")的Count属性和request.form("TextFieldName")(I)的方法,才使得我们更容易的获取名为TextFieldName的类型为text的form项元素的数目和分别获取它们的值。这两种方法的用处很大,可以大大的简化我们所要编写的代码。大家一定要记住了这两种用法。下面我再给出一个没有用到这两种用法的ASP程序源代码,大家比较比较,体会一下为什么上面的代码要好。

'/*DynamicAddForm2.asp文件的源代码开始点*/

<%@ Language=VBScript %>

<%

'----------------------------------------------------

'Author : WaiWai(歪歪)

'Created Date : 2000/1/13

'File Name : DynamicAddForm.ASP

'Description : Dynamic Add Form's Text Fields.

'All Rights Reserved.所有权归City Club

'----------------------------------------------------

%>

<HTML>

<HEAD>

<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">

</HEAD>

<style type="text/css">

<!--

td { font-size: 9pt}

body { font-size: 9pt}

select { font-size: 9pt}

A {text-decoration: none; color: #003366; font-size: 9pt}

A:hover {text-decoration: underline; color: #FF0000; font-size: 9pt}

-->

</style>

<title>Add new mail server site. All Rights Reserved.</title>

<script language=javascript>

function mycheck(tt) {

alert("afd")

return false

}

</script>

<BODY topmargin=12>

<form name=form1 method=post>

<table border="1" cellspacing="0" height=400 width=98% bordercolorlight="#5E5E00" bordercolordark="#FFFFEC" bgcolor=LightGrey align=center valign=top>

<td align=center colspan=5 valign=top height=30>

<h4>追加新邮件服务器信息</h4>

</td><tr>

<td align=center valign=top height=10><font style="font-size:11pt">条数</font></td>

<td align=center valign=top height=10 width=43%><font style="font-size:11pt">邮件服务器URL</font></td>

<td align=center valign=top height=20 width=17%><font style="font-size:11pt">用户名参数变量</font></td>

<td align=center valign=top height=20 width=17%><font style="font-size:11pt">密码参数变量</font></td>

<td align=center valign=top height=20 width=17%><font style="font-size:11pt">站点名称</font></td>

<tr>

<td colspan=5 valign=top height=30>

<font color=blue>[ * * * Example: * * * ]<br>

0. 990.net/prog/login?

user

pass990.net

</font>

</td>

<tr>

<%

if trim(Request.form("num"))="" then

'/*此时表示用户首次打开此ASP页,所以所得的num为空,并显示出相应的输入界面供用户输入信息

'其中的num值是为来记录类型为text的form元素的数目,与第一个代码文件中的 'request.form("items").Count效果一样.*/

'/*First time open this page.*/

Response.Write "<td align=center valign=top>1.</td>"

Response.Write "<input type=hidden name=num value=1>"

Response.Write "<td align=center valign=top >"

Response.Write "<input type=text size=40 name=url1></td>"

Response.Write "<td align=center valign=top ><input type=text size=12 id=text1 name=user_var1></td>" & vbcrlf

Response.Write "<td align=center valign=top ><input type=text size=12 id=text2 name=pw_var1></td>"

Response.Write "<td align=center valign=top ><input type=text size=12 id=text2 name=sitename1></td><tr>"

else

'/*Add new*/

'Response.Write "<td align=center valign=top>" & trim(Request.Form("num")) & ".</td>"

'/*Loop Start*/

Response.Write "<td colspan=5 valign=top>"

for I = 1 to cint(trim(Request.Form("num")))+1

%>

<%=I%>.

<%if I<10 then

'/*此处的目的是为了保证前10个元素与后89个元素缩进相同的宽度*/%>

<%elseif I<100 and I>9 then%>

<%end if%>

<%if I<>cint(trim(Request.Form("num")))+1 then

url="url" & I '/*生成如url1,url2......的字符串*/

user_var = "user_var" & I

pw_var = "pw_var" & I

sitename = "sitename" & I

if trim(request.form(url))<>"" and trim(Request.Form(user_var))<>"" and_ trim(Request.Form(pw_var))<>"" and trim(Request.Form(sitename))<>"" then %>

<input type=text size=40 name=<%=url%> value=<%=trim(request.form(url))%>>

<input type=text size=12 id=text1 name=<%=user_var%> value=<%=trim(Request.Form(user_var))%>>

<input type=text size=12 id=text2 name=&l

[1] [2] 下一页

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有