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


Posted in Javascript onFebruary 19, 2010

想法
假设你有一个在线的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)
Javascript 相关文章推荐
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
深入浅出ES6之let和const命令
Aug 25 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
解决vue组件中click事件失效的问题
Nov 09 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
JavaScript DOM学习第六章 表单实例
Feb 19 #Javascript
JavaScript DOM 学习第五章 表单简介
Feb 19 #Javascript
JavaScript DOM学习第四章 getElementByTagNames
Feb 19 #Javascript
JavaScript DOM 学习第三章 内容表格
Feb 19 #Javascript
JavaScript DOM 学习第二章 编辑文本
Feb 19 #Javascript
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 #Javascript
JavaScript 题型问答有答案参考
Feb 17 #Javascript
You might like
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
js window.onload 加载多个函数的方法
2009/11/02 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
Javascript获取某个月的天数
2018/05/30 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
质检员的岗位职责
2013/11/15 职场文书
测试工程师职业规划书
2014/02/06 职场文书
财务科科长岗位职责
2014/03/10 职场文书
管理建议书范文
2014/05/13 职场文书
邀请书格式范文
2015/02/02 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
预备党员考察意见范文
2015/06/01 职场文书
学校教学管理制度
2015/08/06 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL
Java数据结构之堆(优先队列)
2022/05/20 Java/Android