如何實(shí)現(xiàn)動(dòng)態(tài)添加Html文檔中Form項(xiàng)

2019-11-18 22:44:03

字體：大中小

供稿：網(wǎng)友

大家好，今天和大家談?wù)勅绾斡?a href="http://m.survivalescaperooms.com/asp.asp">asp來實(shí)現(xiàn)動(dòng)態(tài)的添加Html文檔中Form項(xiàng)的問題。如果你對(duì)Html比較熟悉的話肯定知道有個(gè)<form></form>的HTML標(biāo)記。在<form>與</form>之間有諸如類型(type)為Text、PassWord、Button、Submit、Reset等的標(biāo)記(元素)。我們這里所說的動(dòng)態(tài)的添加Form項(xiàng)就是指動(dòng)態(tài)的添加<Form></Form>中的Text元素。那么如何去實(shí)現(xiàn)動(dòng)態(tài)的添加Form項(xiàng)呢？

　　我們先分析分析實(shí)現(xiàn)動(dòng)態(tài)添加form項(xiàng)的思路。

　　如果是讓您自己或用諸如FrontPage、Dreamweaver靜態(tài)編寫Html文檔來增加一個(gè)又一個(gè)類型為text的form元素的話。您肯定是寫完第一個(gè)類型為text的form元素后，再會(huì)加入第二個(gè)類型為text的form元素，就這樣一直加到滿足數(shù)目條件為止。我們先不說在加一個(gè)新的類型為text的元素時(shí)，應(yīng)該將已經(jīng)存在且有內(nèi)容、類型也為text的其他form元素也顯示出來。上面所說的通過靜態(tài)編寫Html文檔來增加類型為text的form元素的方法，其實(shí)就是我們在ASP程序文件中實(shí)現(xiàn)動(dòng)態(tài)添加類型為text的form元素的基本思路。如何去得到已經(jīng)存在且有內(nèi)容、類型也為text的其他form元素的內(nèi)容呢？在ASP程序中通過request.form("TextFieldName")可以得到。其中的"TextFieldName"是指<form></form>中名字為"TextFieldName"的項(xiàng)。就是指<form><input type=text name=
"TextFieldName"></form>中的"TextFieldName"。

　　現(xiàn)在我們知道如何得到了表單的內(nèi)容了，那么我們就可以通過這種方法來得到已經(jīng)存在且有內(nèi)容、類型為text的form元素的值了。再在顯示這些已經(jīng)有值的text項(xiàng)時(shí)，我們就可以把所得到的值賦給相應(yīng)的項(xiàng)。接下來，我們又會(huì)想如何去知道一共有多少個(gè)有內(nèi)容、類型為text的form項(xiàng)呢？我們可以通過以下這種方法來得到。那就是通過request.form("TextFieldName")的Count屬性來得到。這是因?yàn)樵诘玫奖韱沃卸鄠€(gè)類型為Text并且同名的form元素時(shí)，我們能得到的是一組值，也就說它們的值是放在一個(gè)名為TextFieldName的集合之中。而此時(shí)的count屬性就是統(tǒng)計(jì)這個(gè)集合中同類元素的數(shù)目的，這樣我們就可以知道一共有多少個(gè)這樣的類型為text的form元素了，并且可以用循環(huán)語句與count屬性取出集合各自的值。您可能會(huì)問：那么我們又如何才能得到這個(gè)集合中每一個(gè)名為TextFieldName類型為text的form的元素的值呢？在此之前我們先定義一個(gè)變量I，它的初始值為1，其實(shí)這個(gè)變量I就是我們在做循環(huán)時(shí)的變量。接下來我們就可以通過request.form("TextFieldName")(I)的方法來獲取每一個(gè)名為TextFieldName的類型為text的form元素的值了。還有一點(diǎn)要注意，就是我們在將已經(jīng)有值、類型也為text的form元素的值取出賦給相應(yīng)項(xiàng)并顯示出來的時(shí)候，我們還應(yīng)該再增加一個(gè)新的類型為text的form項(xiàng)。為什么呢？這是為了讓我們還可以再接著繼續(xù)添加新的值。不然的話，在取出所有已經(jīng)有值的類型為text的form元素后，您就沒有繼續(xù)添加新值的地方了，那也就成不了動(dòng)態(tài)添加Html文檔中Form項(xiàng)了。所以呢，您一定不能忘記這很重要的一點(diǎn)。現(xiàn)在我們知道如何取得這些滿足條件的類型為text的form的元素?cái)?shù)目了，也知道如何分別獲取它們各自的值了。那么我又如何去控制只僅僅將已經(jīng)有值、類型為text的form的元素呢？以及我們倒底如何去實(shí)現(xiàn)上面所說的一切呢？那么接下來我會(huì)給出它的源代碼，并且會(huì)在有些地方加上注釋或給出解釋。
'/*DynamicAddForm.asp文件的源代碼開始點(diǎn)*/
<%@ Language=VBScript %>
<%
'----------------------------------------------
'Author : WaiWai(歪歪)
'Created Date : 2000-2-20
'File Name : DynamicAddForm.ASP
'Description : Dynamic Add Form's Text Fields.
'All Rights Reserved.所有權(quán)歸City Club.
'----------------------------------------------
%>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<title>Dynamic Add Form Text Elements.</title>
<style type="text/CSS">

</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")) = "顯示已有項(xiàng)" then
'/*其中的trim()函數(shù)是去掉Request.Form("List")兩邊的空格*/

'/*當(dāng)您點(diǎn)擊了名為"顯示已有項(xiàng)"的按鈕時(shí)，我們將會(huì)看到所有已經(jīng)有值的類型為text的form項(xiàng)*/
Response.Write "<td><form><center>已經(jīng)存的元素內(nèi)容是:" & "</td><tr>"
for I = 1 to Request.Form("items").Count '/*已經(jīng)存在的Text類型的數(shù)目*/
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()'>
'/*點(diǎn)擊了<Back>按鈕后就會(huì)返回上一頁，也就是添加類型為text的Form項(xiàng)所在的頁*/
Response.write "</form></td><tr>"
end if
else '/*此時(shí)表明用戶是點(diǎn)擊了名為"添加"按鈕，要進(jìn)行添加操作*/
Response.Write "<td align=center><form action=DynamicAddForm.asp method=post></td>"
for I = 1 to Request.Form("items").Count
'/*此時(shí)的操作是循環(huán)顯示出已經(jīng)存在且產(chǎn)有值的類型為text的form元素*/
'/*Request.Form("items").Count為已經(jīng)存在的Text類型的數(shù)目*/
'/*我們可以在此處加入對(duì)所添加內(nèi)容的條件判斷。如判斷所添加內(nèi)容的長度是否小于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>"
'/*此處是添加一個(gè)名為newItem類型為text的form元素，讓用戶可以繼續(xù)進(jìn)行添加操作。*/
else
'/*此時(shí)表明用戶在添加新的類型為text的form元素處并沒有添加新的值，所以就只能列出*/
'/*一個(gè)名為newItem類型為text的form元素，讓用戶可以繼續(xù)進(jìn)行添加操作。*/
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="顯示已有項(xiàng)" style="font-size:12pt">
<input type=submit name="Add" value="添加" style="font-size:12pt">
</form>
</td>
<%
end if
%>
</table>
</BODY>
</HTML>
'/*DynamicAddForm.asp文件的源代碼結(jié)束點(diǎn)*/

　　您在看了這些源代碼后，可能會(huì)注意到有兩個(gè)類型都為text的form項(xiàng)元素：一個(gè)名字為items、一個(gè)名字為newItem。為什么呢？這是因?yàn)槲覀円獏^(qū)別哪些是用戶通過點(diǎn)擊<添加>按鈕、并且輸入了新值后得到的，哪些是我們?yōu)榱俗層脩裟軌蛴械胤娇梢暂斎胄轮档念愋蜑閠ext的form項(xiàng)元素。這樣我們就能很清楚的在循環(huán)時(shí)只列出用戶已經(jīng)添加的、有值的類型為text的form項(xiàng)元素了。這就是我們?yōu)槭裁窗阉鼈兠刹煌拿值木壒剩遣皇呛苊钅兀亢呛? :-)。其實(shí)這種方法的關(guān)鍵在于利用了request.form("TextFieldName")的Count屬性和request.form("TextFieldName")(I)的方法，才使得我們更容易的獲取名為TextFieldName的類型為text的form項(xiàng)元素的數(shù)目和分別獲取它們的值。這兩種方法的用處很大，可以大大的簡化我們所要編寫的代碼。大家一定要記住了這兩種用法。下面我再給出一個(gè)沒有用到這兩種用法的ASP程序源代碼，大家比較比較，體會(huì)一下為什么上面的代碼要好。

'/*DynamicAddForm2.asp文件的源代碼開始點(diǎn)*/
<%@ Language=VBScript %>
<%
'----------------------------------------------------
'Author : WaiWai(歪歪)
'Created Date : 2000/1/13
'File Name : DynamicAddForm.ASP
'Description : Dynamic Add Form's Text Fields.
'All Rights Reserved.所有權(quán)歸City Club
'----------------------------------------------------
%>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
</HEAD>
<style type="text/css">

</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>追加新郵件服務(wù)器信息</h4>
</td><tr>
<td align=center valign=top height=10><font style="font-size:11pt">條數(shù)</font></td>
<td align=center valign=top height=10 width=43%><font style="font-size:11pt">郵件服務(wù)器URL</font></td>
<td align=center valign=top height=20 width=17%><font style="font-size:11pt">用戶名參數(shù)變量</font></td>
<td align=center valign=top height=20 width=17%><font style="font-size:11pt">密碼參數(shù)變量</font></td>
<td align=center valign=top height=20 width=17%><font style="font-size:11pt">站點(diǎn)名稱</font></td>
<tr>
<td colspan=5 valign=top height=30>
<font color=blue>[ * * * Example: * * * ]<br>
0.           990.net/PRog/login?      
                
           user
      
            
pass              990.net
</font>
</td>
<tr>
<%
if trim(Request.form("num"))="" then
'/*此時(shí)表示用戶首次打開此ASP頁，所以所得的num為空，并顯示出相應(yīng)的輸入界面供用戶輸入信息
'其中的num值是為來記錄類型為text的form元素的數(shù)目，與第一個(gè)代碼文件中的 '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個(gè)元素與后89個(gè)元素縮進(jìn)相同的寬度*/%>
  
<%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=<%=pw_var%> value=<%=trim(Request.Form(pw_var))%>>
   <input type=text size=12 id=text2 name=<%=sitename%> value=<%=trim(Request.Form(sitename))%>>
<br>
<% else
%>
<script>
alert("郵件服務(wù)器URL、用戶名參數(shù)變量、密碼參數(shù)變量、站點(diǎn)名稱中有空值！")
window.history.back()
</script>
<% exit for
end if
else%>
   <input type=text size=40 name=url<%=I%>>
    
<input type=text size=12 id=text1 name=user_var<%=I%>>
     
<input type=text size=12 id=text2 name=pw_var<%=I%>>   
<input type=text size=12 id=text2 name=sitename<%=I%>>
<br>
<%end if
next
'/*Loop End*/
end if
%>
</td>
<tr>
<td colspan=5 align=center height=20>
<input type=button value="追加" style="font-size:11pt"
onclick="{document['form1'].action='DynamicAddForm.ASP';
document.form1.submit();}">   
<input type=Button value="保存" style="font-size:11pt"
onclick="document['form1'].action='SaveNew.asp';
document.form1.submit();">
   
<input type=button value="返回控制臺(tái)" style="font-size:11pt"
onClick="window.location='PostOfficeConsole.asp'">
</td>
</table>
<%if trim(Request.Form("num"))<>"" then
'/*當(dāng)開始給第一個(gè)類型為text的form元素添加了值的時(shí)候開始記錄text類型元素的數(shù)目*/%>
<input type=hidden name=num value=<%=cint(trim(Request.Form("num")))+1%>>
<%end if%>
</form>
</BODY>
</HTML>
'/*DynamicAddForm2.asp文件的源代碼結(jié)束點(diǎn)*/

　　現(xiàn)在大家都看到了這兩種方法各自實(shí)現(xiàn)的程序源代碼了。您有什么想法呢？呵呵，是不是覺得第一個(gè)程序代碼要比第二個(gè)程序代碼簡潔的多呢。我們在第一個(gè)程序代碼中是在得到同名類型為text的form元素的值時(shí)用到了request.form("TextFieldName")的Count屬性來統(tǒng)計(jì)到目前為止一共有多少個(gè)這樣的form元素。而在第二個(gè)程序代碼中，我們是通過<form></form>中類型為hidden的元素來保存和得到這個(gè)數(shù)的。還有一點(diǎn)值得再提一次，那就是把這些類型為text的form元素的名字都命名成同一名字。這就可以避免在第二個(gè)程序代碼中諸如“url="url" & I”的部分了。當(dāng)然了，這個(gè)做法在是知道request.form("TextFieldName")有Count這個(gè)屬性的前提下才會(huì)想到的了。所以第一個(gè)程序代碼的優(yōu)點(diǎn)在于它充分利用了在獲取同名同類型的form元素的值時(shí)的Count屬性和值的取法。呵呵，解決問題的好思路與方法是基于對(duì)所用工具有著充分了解的基礎(chǔ)之上的。。所有這些的關(guān)鍵是我們要不斷的去做，這樣我們才能更好的領(lǐng)悟和了解，學(xué)習(xí)到、有著更好更妙的方法。

上一篇：一個(gè)BBS的源代碼(一)

下一篇：組件對(duì)象開發(fā)Web應(yīng)用的實(shí)例分析