快捷導(dǎo)航

JavaScript DOM 學(xué)習(xí)第七章表單的擴(kuò)展

更新時(shí)間：2010年02月19日 13:49:33 作者：

這一章我會(huì)處理一個(gè)簡(jiǎn)單的W3C DOM腳本。他會(huì)幫助我們從一個(gè)新的角度來(lái)看待交互設(shè)計(jì)。

想法
假設(shè)你有一個(gè)在線(xiàn)的CD評(píng)級(jí)工具。你希望用戶(hù)查看他們喜歡的所有CD。但是你怎么知道用戶(hù)平均會(huì)查看多少?gòu)埬?？你在這個(gè)頁(yè)面上需要添加多少字段呢？
在W3CDOM出現(xiàn)之前這確實(shí)是一個(gè)問(wèn)題。假設(shè)你放置了7張CD。但是用戶(hù)很可能只想查看一張，太多可能會(huì)嚇著用戶(hù)，而有些用戶(hù)想查看自己的所有CD，這樣就不得不反復(fù)提交很多次。這確實(shí)很煩人。
只有使用W3C DOM才能讓用戶(hù)決定生成多少個(gè)字段。這個(gè)效果和之前的大不相同。
例子
當(dāng)你點(diǎn)擊發(fā)送的時(shí)候，表單就會(huì)把得到的所有參數(shù)以數(shù)組的形式發(fā)送。這用來(lái)檢查是否真正的發(fā)送到了服務(wù)器端。不幸的是，mac版的IE和Safari不能發(fā)送。
IE的問(wèn)題
windows下的IE有兩個(gè)嚴(yán)重的問(wèn)題：
第一個(gè)問(wèn)題是所有生成的單選框都同屬于一個(gè)數(shù)組，即使他們的names不同。這樣用戶(hù)就只能在所有的單選框里面選擇一個(gè)。也就是說(shuō)你不能在生成的表單里面實(shí)用單選框。
有讀者說(shuō)通過(guò)innerHTML生成的單選框沒(méi)有問(wèn)題。如果你非要實(shí)用單選框的話(huà)，你可以試試。
第二個(gè)問(wèn)題是生成的表單通過(guò)傳統(tǒng)的document.forms無(wú)法訪(fǎng)問(wèn)：IE沒(méi)有在數(shù)組里面包含他們。這個(gè)可以通過(guò)給他們?cè)O(shè)置ID來(lái)解決。
解釋
表單的HTML代碼：

復(fù)制代碼代碼如下:

 
<div id="readroot" style="display: none"> 
    <input type="button" value="Remove review" 
        onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br /> 
    <input name="cd" value="title" /> 
    <select name="rankingsel"> 
        <option>Rating</option> 
        <option value="excellent">Excellent</option> 
        <option value="good">Good</option> 
        <option value="ok">OK</option> 
        <option value="poor">Poor</option> 
        <option value="bad">Bad</option> 
    </select><br /><br /> 
    <textarea rows="5" cols="20" name="review">Short review</textarea> 
    <br />Radio buttons included to test them in Explorer:<br /> 
    <input type="radio" name="something" value="test1" />Test 1<br /> 
    <input type="radio" name="something" value="test2" />Test 2 
</div> 
<form method="post" action="/cgi-bin/show_params.cgi"> 
    <span id="writeroot"></span> 
    <input type="button" id="moreFields" value="Give me more fields!" /> 
    <input type="submit" value="Send form" /> 
</form> 

真正的表單項(xiàng)目在ID為readroot的DIV并且display值為none。這個(gè)DIV是一個(gè)模板，用戶(hù)不能修改。當(dāng)用戶(hù)需要更多的表單的時(shí)候我們就復(fù)制這個(gè)模板然后添加在表單之后。我們?cè)谝婚_(kāi)始的就加載，這樣當(dāng)用戶(hù)打開(kāi)頁(yè)面的時(shí)候就能看到。
這個(gè)DIV在表單之外，所以當(dāng)用戶(hù)提交表單的時(shí)候，這個(gè)模板的內(nèi)容不會(huì)被提交。
ID為writeroot的SPAN是一個(gè)標(biāo)記。新的生成的表單就插入在他的前面。
添加表單項(xiàng)目
下面的代碼可以再需要的時(shí)候用來(lái)添加表單項(xiàng)目：

復(fù)制代碼代碼如下:

 
var counter = 0; 
function moreFields() { 
    counter++; 
    var newFields = document.getElementById('readroot').cloneNode(true); 
    newFields.id = ''; 
    newFields.style.display = 'block'; 
    var newField = newFields.childNodes; 
    for (var i=0;i<newField.length;i++) { 
        var theName = newField[i].name 
        if (theName) 
            newField[i].name = theName + counter; 
    } 
    var insertHere = document.getElementById('writeroot'); 
    insertHere.parentNode.insertBefore(newFields,insertHere); 
} 
window.onload = moreFields; 

首先我們需要一個(gè)計(jì)數(shù)器counter，因?yàn)樗械谋韱雾?xiàng)都應(yīng)該有唯一的一個(gè)名字。我們把計(jì)數(shù)器的值添加在生成name后面。初始化計(jì)數(shù)器：

復(fù)制代碼代碼如下:

var counter = 0;

然后是實(shí)際的函數(shù)。我們給計(jì)數(shù)器加1：

復(fù)制代碼代碼如下:

 
function moreFields() { 
counter++; 

然后復(fù)制我們的模板，移除ID，并且把display設(shè)置為block。readroot應(yīng)該是整個(gè)文檔里面唯一的ID，復(fù)制模板后應(yīng)該顯示出來(lái)讓用戶(hù)看到。

復(fù)制代碼代碼如下:

 
var newFields = document.getElementById('readroot').cloneNode(true); 
newFields.id = ''; 
newFields.style.display = 'block'; 

我們遍歷這個(gè)拷貝的子元素：

復(fù)制代碼代碼如下:

 
var newField = newFields.childNodes; 
for (var i=0;i<newField.length;i++) { 

如果子元素有name屬性，那么我們就在name值上加上計(jì)數(shù)器的值，以保證他的唯一性：

復(fù)制代碼代碼如下:

 
var theName = newField[i].name 
if (theName) 
newField[i].name = theName + counter; 
} 

現(xiàn)在這個(gè)拷貝已經(jīng)準(zhǔn)備好插入了。我們把他插入到writeroot之前：

復(fù)制代碼代碼如下:

var insertHere = document.getElementById('writeroot'); 
insertHere.parentNode.insertBefore(newFields,insertHere); 
} 

然后我們?cè)陧?yè)面加載的時(shí)候就執(zhí)行一次，這樣用戶(hù)進(jìn)入的時(shí)候就能看到：

復(fù)制代碼代碼如下:

window.onload = moreFields;

移除表單項(xiàng)
每一個(gè)模板的拷貝都有一個(gè)移除按鈕:

復(fù)制代碼代碼如下:

 <input type="button" value="Remove review" 
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /> 

點(diǎn)擊這個(gè)按鈕就會(huì)從移除他的父元素（DIV）。整個(gè)生成的表單就都會(huì)消失，并且不會(huì)再出現(xiàn)。
翻譯地址：http://www.quirksmode.org/dom/domform.html
轉(zhuǎn)載請(qǐng)保留以下信息
作者：北玉(tw:@rehawk)

您可能感興趣的文章: