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 相关文章推荐
可实现多表单提交的javascript函数
Aug 01 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
深入理解Node module模块
Mar 26 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 Javascript
axios封装与传参示例详解
Oct 18 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
Zend引擎的发展 [15]
2006/10/09 PHP
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
nginx下安装php7+php5
2016/07/31 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
php表单处理操作
2017/11/16 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
js中apply与call简单用法详解
2017/11/06 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
python获取当前日期和时间的方法
2015/04/30 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
中专毕业生自我鉴定范文
2013/11/09 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
就业协议书怎么填
2014/04/11 职场文书
租赁协议书范本
2014/04/22 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
优秀教师个人材料
2014/12/15 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
刑事法律意见书
2015/06/04 职场文书
如何利用React实现图片识别App
2022/02/18 Javascript
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS