开发学院网页设计 JavaScript JavaScript DOM学习第七章：表单的扩展阅读

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

　2010-03-30 00:00:00　来源：WEB开发网　　　

核心提示：想法假设你有一个在线的CD评级工具，你希望用户查看他们喜欢的所有CD，JavaScript DOM学习第七章：表单的扩展，但是你怎么知道用户平均会查看多少张呢？你在这个页面上需要添加多少字段呢？在W3CDOM出现之前这确实是一个问题，假设你放置了7张CD，你可以试试，第二个问题是生成的表单通过传统的document.f

想法

假设你有一个在线的CD评级工具。你希望用户查看他们喜欢的所有CD。但是你怎么知道用户平均会查看多少张呢？你在这个页面上需要添加多少字段呢？

在W3CDOM出现之前这确实是一个问题。假设你放置了7张CD。但是用户很可能只想查看一张，太多可能会吓着用户，而有些用户想查看自己的所有CD，这样就不得不反复提交很多次。这确实很烦人。

只有使用W3C DOM才能让用户决定生成多少个字段。这个效果和之前的大不相同。

例子

当你点击发送的时候，表单就会把得到的所有参数以数组的形式发送。这用来检查是否真正的发送到了服务器端。不幸的是，mac版的IE和Safari不能发送。

IE的问题

windows下的IE有两个严重的问题：

第一个问题是所有生成的单选框都同属于一个数组，即使他们的names不同。这样用户就只能在所有的单选框里面选择一个。也就是说你不能在生成的表单里面实用单选框。

有读者说通过innerHTML生成的单选框没有问题。如果你非要实用单选框的话，你可以试试。

第二个问题是生成的表单通过传统的document.forms无法访问：IE没有在数组里面包含他们。这个可以通过给他们设置ID来解决。

解释

表单的HTML代码：

01　<div　id="readroot"　style="display:　none"> 02　　 03　　　　　<input　type="button"　value="Remove　review" 04　　　　　　　　　　/><br　/><br　/> 05　　 06　　　　　<input　name="cd"　value="title"　/> 07　　 08　　　　　<select　name="rankingsel"> 09　　　　　　　　　<option>Rating</option> 10　　　　　　　　　<option　value="excellent">Excellent</option> 11　　　　　　　　　<option　value="good">Good</option> 12　　　　　　　　　<option　value="ok">OK</option> 13　　　　　　　　　<option　value="poor">Poor</option> 14　　　　　　　　　<option　value="bad">Bad</option> 15　　　　　</select><br　/><br　/> 16　　 17　　　　　<textarea　rows="5"　cols="20"　name="review">Short　review</textarea> 18　　　　　<br　/>Radio　buttons　included　to　test　them　in　Explorer:<br　/> 19　　　　　<input　type="radio"　name="something"　value="test1"　/>Test　1<br　/> 20　　　　　<input　type="radio"　name="something"　value="test2"　/>Test　2 21　　 22　</div> 23　　 24　<form　method="post"　action="/cgi-bin/show_params.cgi"> 25　　 26　　　　　<span　id="writeroot"></span> 27　　 28　　　　　<input　type="button"　id="moreFields"　value="Give　me　more　fields!"　/> 29　　　　　<input　type="submit"　value="Send　form"　/> 30　　 31　</form>