JavaScript DOM 学习第七章 表单的扩展

想法
假设你有一个在线的CD评级工具。你希望用户查看他们喜欢的所有CD。但是你怎么知道用户平均会查看多少张呢？你在这个页面上需要添加多少字段呢？
在W3CDOM出现之前这确实是一个问题。假设你放置了7张CD。但是用户很可能只想查看一张，太多可能会吓着用户，而有些用户想查看自己的所有CD，这样就不得不反复提交很多次。这确实很烦人。
只有使用W3C DOM才能让用户决定生成多少个字段。这个效果和之前的大不相同。
例子
当你点击发送的时候，表单就会把得到的所有参数以数组的形式发送。这用来检查是否真正的发送到了服务器端。不幸的是，mac版的IE和Safari不能发送。
IE的问题
windows下的IE有两个严重的问题：
第一个问题是所有生成的单选框都同属于一个数组，即使他们的names不同。这样用户就只能在所有的单选框里面选择一个。也就是说你不能在生成的表单里面实用单选框。
有读者说通过innerHTML生成的单选框没有问题。如果你非要实用单选框的话，你可以试试。
第二个问题是生成的表单通过传统的document.forms无法访问：IE没有在数组里面包含他们。这个可以通过给他们设置ID来解决。
解释
表单的HTML代码：


代码如下:

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

真正的表单项目在ID为readroot的DIV并且display值为none。这个DIV是一个模板，用户不能修改。当用户需要更多的表单的时候我们就复制这个模板然后添加在表单之后。我们在一开始的就加载，这样当用户打开页面的时候就能看到。
这个DIV在表单之外，所以当用户提交表单的时候，这个模板的内容不会被提交。
ID为writeroot的SPAN是一个标记。新的生成的表单就插入在他的前面。
添加表单项目
下面的代码可以再需要的时候用来添加表单项目：


代码如下:

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;

首先我们需要一个计数器counter，因为所有的表单项都应该有唯一的一个名字。我们把计数器的值添加在生成name后面。初始化计数器：


代码如下:

var counter = 0;

然后是实际的函数。我们给计数器加1：


代码如下:

function moreFields() {
counter++;

然后复制我们的模板，移除ID，并且把display设置为block。readroot应该是整个文档里面唯一的ID，复制模板后应该显示出来让用户看到。


代码如下:

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++) {

如果子元素有name属性，那么我们就在name值上加上计数器的值，以保证他的唯一性：


代码如下:

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

现在这个拷贝已经准备好插入了。我们把他插入到writeroot之前：


代码如下:

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

然后我们在页面加载的时候就执行一次，这样用户进入的时候就能看到：


代码如下:

window.onload = moreFields;

移除表单项
每一个模板的拷贝都有一个移除按钮:


代码如下:

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

点击这个按钮就会从移除他的父元素（DIV）。整个生成的表单就都会消失，并且不会再出现。
翻译地址：http://www.quirksmode.org/dom/domform.html
转载请保留以下信息
作者：北玉(tw:@rehawk)