如何實現動態添加Html文檔中Form項

- 中國WEB開發者網絡 (http://www.webasp.net)
-- 技術教程 (http://www.webasp.net/article/)
--- 如何實現動態添加Html文檔中Form項 (http://www.webasp.net/article/1/114.htm)

-- 作者：未知
-- 發佈日期： 2003-04-09

大家好，今天和大家談談如何用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">

</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">

</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
      
            
pass              990.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=<%=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("郵件服務器URL、用戶名參數變量、密碼參數變量、站點名稱中有空值！")
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="返回控制台" style="font-size:11pt"
onClick="window.location='PostOfficeConsole.asp'">
</td>
</table>
<%if trim(Request.Form("num"))<>"" then
'/*當開始給第一個類型為text的form元素添加了值的時候開始記錄text類型元素的數目*/%>
<input type=hidden name=num value=<%=cint(trim(Request.Form("num")))+1%>>
<%end if%>
</form>
</BODY>
</HTML>
'/*DynamicAddForm2.asp文件的源代碼結束點*/

　　現在大家都看到了這兩種方法各自實現的程序源代碼了。您有什麼想法呢？呵呵，是不是覺得第一個程序代碼要比第二個程序代碼簡潔的多呢。我們在第一個程序代碼中是在得到同名類型為text的form元素的值時用到了request.form("TextFieldName")的Count屬性來統計到目前為止一共有多少個這樣的form元素。而在第二個程序代碼中，我們是通過<form></form>中類型為hidden的元素來保存和得到這個數的。還有一點值得再提一次，那就是把這些類型為text的form元素的名字都命名成同一名字。這就可以避免在第二個程序代碼中諸如「url="url" & I」的部分了。當然了，這個做法在是知道request.form("TextFieldName")有Count這個屬性的前提下才會想到的了。所以第一個程序代碼的優點在於它充分利用了在獲取同名同類型的form元素的值時的Count屬性和值的取法。呵呵，解決問題的好思路與方法是基於對所用工具有著充分瞭解的基礎之上的。。所有這些的關鍵是我們要不斷的去做，這樣我們才能更好的領悟和瞭解，學習到、有著更好更妙的方法。

webasp.net