JavaScriptDOM学习第七章表单的扩展
2023-06-13 09:14:16 时间
想法
假设你有一个在线的CD评级工具。你希望用户查看他们喜欢的所有CD。但是你怎么知道用户平均会查看多少张呢?你在这个页面上需要添加多少字段呢?
在W3CDOM出现之前这确实是一个问题。假设你放置了7张CD。但是用户很可能只想查看一张,太多可能会吓着用户,而有些用户想查看自己的所有CD,这样就不得不反复提交很多次。这确实很烦人。
只有使用W3CDOM才能让用户决定生成多少个字段。这个效果和之前的大不相同。
例子
当你点击发送的时候,表单就会把得到的所有参数以数组的形式发送。这用来检查是否真正的发送到了服务器端。不幸的是,mac版的IE和Safari不能发送。
IE的问题
windows下的IE有两个严重的问题:
第一个问题是所有生成的单选框都同属于一个数组,即使他们的names不同。这样用户就只能在所有的单选框里面选择一个。也就是说你不能在生成的表单里面实用单选框。
有读者说通过innerHTML生成的单选框没有问题。如果你非要实用单选框的话,你可以试试。
第二个问题是生成的表单通过传统的document.forms无法访问:IE没有在数组里面包含他们。这个可以通过给他们设置ID来解决。
解释
表单的HTML代码:
复制代码代码如下:
假设你有一个在线的CD评级工具。你希望用户查看他们喜欢的所有CD。但是你怎么知道用户平均会查看多少张呢?你在这个页面上需要添加多少字段呢?
在W3CDOM出现之前这确实是一个问题。假设你放置了7张CD。但是用户很可能只想查看一张,太多可能会吓着用户,而有些用户想查看自己的所有CD,这样就不得不反复提交很多次。这确实很烦人。
只有使用W3CDOM才能让用户决定生成多少个字段。这个效果和之前的大不相同。
例子
当你点击发送的时候,表单就会把得到的所有参数以数组的形式发送。这用来检查是否真正的发送到了服务器端。不幸的是,mac版的IE和Safari不能发送。
IE的问题
windows下的IE有两个严重的问题:
第一个问题是所有生成的单选框都同属于一个数组,即使他们的names不同。这样用户就只能在所有的单选框里面选择一个。也就是说你不能在生成的表单里面实用单选框。
有读者说通过innerHTML生成的单选框没有问题。如果你非要实用单选框的话,你可以试试。
第二个问题是生成的表单通过传统的document.forms无法访问:IE没有在数组里面包含他们。这个可以通过给他们设置ID来解决。
解释
表单的HTML代码:
<divid="readroot"style="display:none">
<inputtype="button"value="Removereview"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);"/><br/><br/>
<inputname="cd"value="title"/>
<selectname="rankingsel">
<option>Rating</option>
<optionvalue="excellent">Excellent</option>
<optionvalue="good">Good</option>
<optionvalue="ok">OK</option>
<optionvalue="poor">Poor</option>
<optionvalue="bad">Bad</option>
</select><br/><br/>
<textarearows="5"cols="20"name="review">Shortreview</textarea>
<br/>RadiobuttonsincludedtotesttheminExplorer:<br/>
<inputtype="radio"name="something"value="test1"/>Test1<br/>
<inputtype="radio"name="something"value="test2"/>Test2
</div>
<formmethod="post"action="/cgi-bin/show_params.cgi">
<spanid="writeroot"></span>
<inputtype="button"id="moreFields"value="Givememorefields!"/>
<inputtype="submit"value="Sendform"/>
</form>
真正的表单项目在ID为readroot的DIV并且display值为none。这个DIV是一个模板,用户不能修改。当用户需要更多的表单的时候我们就复制这个模板然后添加在表单之后。我们在一开始的就加载,这样当用户打开页面的时候就能看到。
这个DIV在表单之外,所以当用户提交表单的时候,这个模板的内容不会被提交。
ID为writeroot的SPAN是一个标记。新的生成的表单就插入在他的前面。
添加表单项目
下面的代码可以再需要的时候用来添加表单项目:
varcounter=0;
functionmoreFields(){
counter++;
varnewFields=document.getElementById("readroot").cloneNode(true);
newFields.id="";
newFields.style.display="block";
varnewField=newFields.childNodes;
for(vari=0;i<newField.length;i++){
vartheName=newField[i].name
if(theName)
newField[i].name=theName+counter;
}
varinsertHere=document.getElementById("writeroot");
insertHere.parentNode.insertBefore(newFields,insertHere);
}
window.onload=moreFields;
首先我们需要一个计数器counter,因为所有的表单项都应该有唯一的一个名字。我们把计数器的值添加在生成name后面。初始化计数器:
然后是实际的函数。我们给计数器加1:
functionmoreFields(){
counter++;
然后复制我们的模板,移除ID,并且把display设置为block。readroot应该是整个文档里面唯一的ID,复制模板后应该显示出来让用户看到。
varnewFields=document.getElementById("readroot").cloneNode(true);
newFields.id="";
newFields.style.display="block";
我们遍历这个拷贝的子元素:
varnewField=newFields.childNodes;
for(vari=0;i<newField.length;i++){
如果子元素有name属性,那么我们就在name值上加上计数器的值,以保证他的唯一性:
vartheName=newField[i].name
if(theName)
newField[i].name=theName+counter;
}
现在这个拷贝已经准备好插入了。我们把他插入到writeroot之前:
insertHere.parentNode.insertBefore(newFields,insertHere);
}
然后我们在页面加载的时候就执行一次,这样用户进入的时候就能看到:
移除表单项
每一个模板的拷贝都有一个移除按钮:
onclick="this.parentNode.parentNode.removeChild(this.parentNode);"/>
点击这个按钮就会从移除他的父元素(DIV)。整个生成的表单就都会消失,并且不会再出现。
翻译地址:http://www.quirksmode.org/dom/domform.html
转载请保留以下信息
作者:北玉(tw:@rehawk)
相关文章
- Kubernetes 中 Descheduler 组件的使用与扩展
- 学习CURL扩展功能的使用(一)「建议收藏」
- 掌握这些 Spring Boot 启动扩展点,已经超过 90% 的人了!
- Chrome扩展开发入门
- SpringBoot扩展点 项目启动后立即执行
- n1.Go语言之三方扩展学习记录
- Nginx学习之Nginx的扩展openresty(三)
- 基于Feign的扩展机制实现TLS通信
- 微服务架构开发实战:微服务的高级主题一自动扩展的定义及意义
- [Nat. Biomed. Eng. | 论文简读] 基于自监督深度学习的全切片病理图像快速可扩展搜索
- 可扩展易配置,快来揭秘新一代自监督学习开源框架
- 23-Kubernetes扩展学习实践笔记
- 龙芯3D5000高性能CPU发布:LoongArch指令集,Chiplet技术,32核,支持4路扩展!
- RabbitMQ学习之(三)_Centos6下RabbitMQ PHP扩展的安装详解程序员
- 对于 飞林沙的的扩展详解编程语言
- 学习Linux:用视频扩展知识边界(linux就该这么学视频)
- 结束预览:微软正式推出Chrome合规性扩展程序
- 谷歌开源电子邮件加密扩展“End-to-End”的代码
- Redis 学习笔记,扩展技能,提升效率。(redis笔记)
- 使用PDO扩展有效管理MSSQL数据库(pdo mssql扩展)
- 学习使用 MySQL PDO 扩展优化 PHP 数据库操作(mysql_pdo 扩展)
- Redis入门实战给开发者构建可扩展高性能缓存应用(学习redis推荐什么书)
- Oracle数据库大规模分区扩展一万多个分区(oracle一万多个分区)
- Redis集群节点扩展需要设置几个哨兵(redis要几个哨兵)
- javascript数组的扩展实现代码集合
- iisPHP5配置PHP扩展模块加载不进来
- SQL2005CLR函数扩展-数据导出的实现详解