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 相关文章推荐
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
js正则匹配多个全部数据问题
Dec 20 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
站长助手-网站web在线管理程序 v1.0 下载
2007/05/12 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
python 算法 排序实现快速排序
2012/06/05 Python
用Python编程实现语音控制电脑
2014/04/01 Python
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
Python 不同对象比较大小示例探讨
2014/08/21 Python
Python读写Excel文件方法介绍
2014/11/22 Python
python基于socket实现网络广播的方法
2015/04/29 Python
深入解析Python中的__builtins__内建对象
2016/06/21 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
python mock测试的示例
2020/10/19 Python
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
迟到检讨书500字
2014/02/05 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
统计员岗位职责
2015/02/11 职场文书
婚前保证书范文
2015/02/28 职场文书
聘任通知书
2015/09/21 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL