大家好,今天和大家談?wù)勅绾斡肁SP來(lái)實(shí)現(xiàn)動(dòng)態(tài)的添加Html文檔中Form項(xiàng)的問(wèn)題。如果你對(duì)Html比較熟悉的話肯定知道有個(gè)<form></form>的HTML標(biāo)記。在<form>與</form>之間有諸如類(lèi)型(type)為T(mén)ext、Password、Button、Submit、Reset等的標(biāo)記(元素)。我們這里所說(shuō)的動(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)編寫(xiě)Html文檔來(lái)增加一個(gè)又一個(gè)類(lèi)型為text的form元素的話。您肯定是寫(xiě)完第一個(gè)類(lèi)型為text的form元素后,再會(huì)加入第二個(gè)類(lèi)型為text的form元素,就這樣一直加到滿(mǎn)足數(shù)目條件為止。我們先不說(shuō)在加一個(gè)新的類(lèi)型為text的元素時(shí),應(yīng)該將已經(jīng)存在且有內(nèi)容、類(lèi)型也為text的其他form元素也顯示出來(lái)。上面所說(shuō)的通過(guò)靜態(tài)編寫(xiě)Html文檔來(lái)增加類(lèi)型為text的form元素的方法,其實(shí)就是我們?cè)贏SP程序文件中實(shí)現(xiàn)動(dòng)態(tài)添加類(lèi)型為text的form元素的基本思路。如何去得到已經(jīng)存在且有內(nèi)容、類(lèi)型也為text的其他form元素的內(nèi)容呢?在ASP程序中通過(guò)request.form("TextFieldName")可以得到。其中的"TextFieldName"是指<form></form>中名字為"TextFieldName"的項(xiàng)。就是指<form><input type=text name= "TextFieldName"></form>中的"TextFieldName"。 現(xiàn)在我們知道如何得到了表單的內(nèi)容了,那么我們就可以通過(guò)這種方法來(lái)得到已經(jīng)存在且有內(nèi)容、類(lèi)型為text的form元素的值了。再在顯示這些已經(jīng)有值的text項(xiàng)時(shí),我們就可以把所得到的值賦給相應(yīng)的項(xiàng)。接下來(lái),我們又會(huì)想如何去知道一共有多少個(gè)有內(nèi)容、類(lèi)型為text的form項(xiàng)呢?我們可以通過(guò)以下這種方法來(lái)得到。那就是通過(guò)request.form("TextFieldName")的Count屬性來(lái)得到。這是因?yàn)樵诘玫奖韱沃卸鄠(gè)類(lèi)型為T(mén)ext并且同名的form元素時(shí),我們能得到的是一組值,也就說(shuō)它們的值是放在一個(gè)名為T(mén)extFieldName的集合之中。而此時(shí)的count屬性就是統(tǒng)計(jì)這個(gè)集合中同類(lèi)元素的數(shù)目的,這樣我們就可以知道一共有多少個(gè)這樣的類(lèi)型為text的form元素了,并且可以用循環(huán)語(yǔ)句與count屬性取出集合各自的值。您可能會(huì)問(wèn):那么我們又如何才能得到這個(gè)集合中每一個(gè)名為T(mén)extFieldName類(lèi)型為text的form的元素的值呢?在此之前我們先定義一個(gè)變量I,它的初始值為1,其實(shí)這個(gè)變量I就是我們?cè)谧鲅h(huán)時(shí)的變量。接下來(lái)我們就可以通過(guò)request.form("TextFieldName")(I)的方法來(lái)獲取每一個(gè)名為T(mén)extFieldName的類(lèi)型為text的form元素的值了。還有一點(diǎn)要注意,就是我們?cè)趯⒁呀?jīng)有值、類(lèi)型也為text的form元素的值取出賦給相應(yīng)項(xiàng)并顯示出來(lái)的時(shí)候,我們還應(yīng)該再增加一個(gè)新的類(lèi)型為text的form項(xiàng)。為什么呢?這是為了讓我們還可以再接著繼續(xù)添加新的值。不然的話,在取出所有已經(jīng)有值的類(lèi)型為text的form元素后,您就沒(méi)有繼續(xù)添加新值的地方了,那也就成不了動(dòng)態(tài)添加Html文檔中Form項(xiàng)了。所以呢,您一定不能忘記這很重要的一點(diǎn)。現(xiàn)在我們知道如何取得這些滿(mǎn)足條件的類(lèi)型為text的form的元素?cái)?shù)目了,也知道如何分別獲取它們各自的值了。那么我又如何去控制只僅僅將已經(jīng)有值、類(lèi)型為text的form的元素呢?以及我們倒底如何去實(shí)現(xiàn)上面所說(shuō)的一切呢?那么接下來(lái)我會(huì)給出它的源代碼,并且會(huì)在有些地方加上注釋或給出解釋。 '/*DynamicAddForm.asp文件的源代碼開(kāi)始點(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"> <!-- 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")) = "顯示已有項(xiàng)" then '/*其中的trim()函數(shù)是去掉Request.Form("List")兩邊的空格*/ '/*當(dāng)您點(diǎn)擊了名為"顯示已有項(xiàng)"的按鈕時(shí),我們將會(huì)看到所有已經(jīng)有值的類(lèi)型為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類(lèi)型的數(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ì)返回上一頁(yè),也就是添加類(lèi)型為text的Form項(xiàng)所在的頁(yè)*/ Response.write "</form></td><tr>" end if else '/*此時(shí)表明用戶(hù)是點(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)有值的類(lèi)型為text的form元素*/ '/*Request.Form("items").Count為已經(jīng)存在的Text類(lèi)型的數(shù)目*/ '/*我們可以在此處加入對(duì)所添加內(nèi)容的條件判斷。如判斷所添加內(nèi)容的長(zhǎng)度是否小于3等.*/ Response.Write "<td align=center><input type=text name=items value='" Response.write Request.Form("items")(I) & "'></td><tr>" '/*此步是將所得到某一有值的類(lèi)型為text的form元素的值顯示出來(lái)*/ next if trim(Request.Form("newItem")) <> "" then '/*此步的目的是檢查是否用戶(hù)在添加新的類(lèi)型為text的form元素處有沒(méi)有添加新值,*/ '/*有則將此值賦給name=items的類(lèi)型為text的form元素,并顯示出來(lái)。*/ 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類(lèi)型為text的form元素,讓用戶(hù)可以繼續(xù)進(jìn)行添加操作。*/ else '/*此時(shí)表明用戶(hù)在添加新的類(lèi)型為text的form元素處并沒(méi)有添加新的值,所以就只能列出*/ '/*一個(gè)名為newItem類(lèi)型為text的form元素,讓用戶(hù)可以繼續(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è)類(lèi)型都為text的form項(xiàng)元素:一個(gè)名字為items、一個(gè)名字為newItem。為什么呢?這是因?yàn)槲覀円獏^(qū)別哪些是用戶(hù)通過(guò)點(diǎn)擊<添加>按鈕、并且輸入了新值后得到的,哪些是我們?yōu)榱俗層脩?hù)能夠有地方可以輸入新值的類(lèi)型為text的form項(xiàng)元素。這樣我們就能很清楚的在循環(huán)時(shí)只列出用戶(hù)已經(jīng)添加的、有值的類(lèi)型為text的form項(xiàng)元素了。這就是我們?yōu)槭裁窗阉鼈兠刹煌拿值木壒剩遣皇呛苊钅兀亢呛? :-)。其實(shí)這種方法的關(guān)鍵在于利用了request.form("TextFieldName")的Count屬性和request.form("TextFieldName")(I)的方法,才使得我們更容易的獲取名為T(mén)extFieldName的類(lèi)型為text的form項(xiàng)元素的數(shù)目和分別獲取它們的值。這兩種方法的用處很大,可以大大的簡(jiǎn)化我們所要編寫(xiě)的代碼。大家一定要記住了這兩種用法。下面我再給出一個(gè)沒(méi)有用到這兩種用法的ASP程序源代碼,大家比較比較,體會(huì)一下為什么上面的代碼要好。 '/*DynamicAddForm2.asp文件的源代碼開(kāi)始點(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"> <!-- 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>追加新郵件服務(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">用戶(hù)名參數(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)名稱(chēng)</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í)表示用戶(hù)首次打開(kāi)此ASP頁(yè),所以所得的num為空,并顯示出相應(yīng)的輸入界面供用戶(hù)輸入信息 '其中的num值是為來(lái)記錄類(lèi)型為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、用戶(hù)名參數(shù)變量、密碼參數(shù)變量、站點(diǎn)名稱(chēng)中有空值!") 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)開(kāi)始給第一個(gè)類(lèi)型為text的form元素添加了值的時(shí)候開(kāi)始記錄text類(lèi)型元素的數(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)的程序源代碼了。您有什么想法呢?呵呵,是不是覺(jué)得第一個(gè)程序代碼要比第二個(gè)程序代碼簡(jiǎn)潔的多呢。我們?cè)诘谝粋(gè)程序代碼中是在得到同名類(lèi)型為text的form元素的值時(shí)用到了request.form("TextFieldName")的Count屬性來(lái)統(tǒng)計(jì)到目前為止一共有多少個(gè)這樣的form元素。而在第二個(gè)程序代碼中,我們是通過(guò)<form></form>中類(lèi)型為hidden的元素來(lái)保存和得到這個(gè)數(shù)的。還有一點(diǎn)值得再提一次,那就是把這些類(lèi)型為text的form元素的名字都命名成同一名字。這就可以避免在第二個(gè)程序代碼中諸如“url="url" & I”的部分了。當(dāng)然了,這個(gè)做法在是知道request.form("TextFieldName")有Count這個(gè)屬性的前提下才會(huì)想到的了。所以第一個(gè)程序代碼的優(yōu)點(diǎn)在于它充分利用了在獲取同名同類(lèi)型的form元素的值時(shí)的Count屬性和值的取法。呵呵,解決問(wèn)題的好思路與方法是基于對(duì)所用工具有著充分了解的基礎(chǔ)之上的。。所有這些的關(guān)鍵是我們要不斷的去做,這樣我們才能更好的領(lǐng)悟和了解,學(xué)習(xí)到、有著更好更妙的方法。
|
溫馨提示:喜歡本站的話,請(qǐng)收藏一下本站!