您當(dāng)前位置：首頁 > web前端 > htmlcss > 如何實(shí)現(xiàn)動(dòng)態(tài)添加Html文檔中Form項(xiàng)

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

來源：程序員人生發(fā)布時(shí)間：2014-03-30 13:03:18 閱讀次數(shù)：2716次

大家好，今天和大家談?wù)勅绾斡肁SP來實(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)的思路?！　∪绻亲屇约夯蛴弥T如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í)就是我們?cè)贏SP程序文件中實(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"?！　‖F(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就是我們?cè)谧鲅h(huán)時(shí)的變量。接下來我們就可以通過request.form("TextFieldName")(I)的方法來獲取每一個(gè)名為TextFieldName的類型為text的form元素的值了。還有一點(diǎn)要注意，就是我們?cè)趯⒁呀?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>"nextif trim(Request.Form("newItem"))<>"" thenResponse.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 ifelse '/*此時(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元素的值顯示出來*/nextif 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>" & vbcrlfResponse.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 thenurl="url" & I '/*生成如url1,url2......的字符串*/user_var = "user_var" & Ipw_var = "pw_var" & Isitename = "sitename" & Iif 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 forend ifelse%>   <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 ifnext'/*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è)程序代碼簡潔的多呢。我們?cè)诘谝粋€(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í)到、有著更好更妙的方法。

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生

------分隔線----------------------------

上一篇 草根站長寫軟文營銷的三種境界

下一篇 SQL SERVER 如何壓縮數(shù)據(jù)庫LDF日志文件

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點(diǎn)

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

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