javascript动态添加form表单元素
2014年11月7日 17:10:40
之前写过几篇类似的文章,现在看来比较初级,弄一个高级的简单的
情景: 后台要上传游戏截图,截图数量不确定,因此使用动态添加input节点的方法去实现这个效果
主要用到的函数有:
document.getElementById();
objNode.parentNode;
objNode.cloneNode();
objNode.removeAtrribute();
objNode.innerHTML();
objNode.appendChild();
html:
<div class="well well-sm">
<div class="form-group">
<label class="form-label">游戏截图:</label>
<input type="file" name="jietu[]" class="form-input">
<span class="form-tip" onclick="add_jietu()"><font color="#428bca">点击添加游戏截图</font></span>
</div>
<div class="form-group" id="add_jietu">
<label class="form-label">游戏截图:</label>
<input type="file" name="jietu[]" class="form-input">
</div>
</div>
javascript:
<script type="text/javascript">
function add_jietu()
{
var add_jietu = document.getElementById('add_jietu');
var nodeFather = add_jietu.parentNode;
var node_clone = add_jietu.cloneNode();
content = add_jietu.innerHTML;
node_clone.removeAttribute('id');
node_clone.innerHTML = content;
nodeFather.appendChild(node_clone);
}
</script>
注意:
1. js第6行使用的是"克隆节点"函数,克隆后的节点里边并没有html,需要第9行的代码去填充内容
2. 使用克隆功能,因为该方法生成的变量类型是"节点类型", 才可以用到appendChild()函数里做参数
3. 节点的 nextSibling 和 lastChild 属性得到的变量是 Text类型(在chrome的调试窗口中看到的)
javascript动态添加form表单元素的更多相关文章
- form表单 无法提交js动态添加的表单元素问题。。
第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url ...
- 如何解决jQuery Validation针对动态添加的表单无法工作的问题?
为了充分利用ASP.NET MVC在服务端呈现HTML的能力,在<利用动态注入HTML的方式来设计复杂页面>一文中介绍了,通过Ajax调用获取HTML来呈现复杂页面中某一部分界面的解决方案 ...
- js动态创建Form表单并提交
javascript动态创建Form表单和表单项,然后提交表单请求,最后删除表单,代码片段如下(Firefox测试通过): var dlform = document.createElement('f ...
- Javascript中的Form表单知识点总结
Javascript中的Form表单知识点总结 在HTML中,表单是由form元素来表示的,但是在javascript中,表单则由HTMLFormElement类型,此元素继承了HTMLElement ...
- JavaScript 创建一个 form 表单并提交
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- 【jQuery】form表单元素序列化为json对象
序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head&g ...
- form表单元素设置只读
form表单元素设置只读 CreateTime--2017年5月5日11:42:41 Author:Marydon 1.设置文本框只读 <!-- 方法一:简写 --> <inpu ...
- form表单元素的值序列化成对象
/** * 将form表单元素的值序列化成对象 * param: form jquery form对象 */ var serializeObject = function(form) { var o ...
- 将form表单元素的值序列化成对象
/**jQuery * 将form表单元素的值序列化成对象 * @returns object */ var serializeObject = function(form) { var o = {} ...
随机推荐
- Teradata(不同date输出要求;表类型)
1. 需要某种特定形式的date 类型export 到文件中,例如 YYYYMMDD/ YYYY-MM-DD 这时候不一定非要用date 类型,可以转换为varchar 类型! CAST(CAST ( ...
- BZOJ-3670 动物园 KMP+奇怪的东西
YveH爷再刷KMP,DCrusher看他刷KMP,跟着两个人一块刷KMP... 3670: [Noi2014]动物园 Time Limit: 10 Sec Memory Limit: 512 MB ...
- 学习笔记-KMP算法
按照学习计划和TimeMachine学长的推荐,学习了一下KMP算法. 昨晚晚自习下课前粗略的看了看,发现根本理解不了高端的next数组啊有木有,不过好在在今天系统的学习了之后感觉是有很大提升的了,起 ...
- BZOJ3172 后缀数组
题意:求出一篇文章中每个单词的出现次数 对样例的解释: 原文是这样的: a aa aaa 注意每个单词后都会换行 所以a出现次数为6,aa为3 (aa中一次,aaa中两次),aaa为1 标准解法好像是 ...
- 在excel批量更改单元格类型后的批量刷新显示
把E的东西变成完整显示 解决办法: 选中所需要更改的整列数据------>菜单栏的数据选项------>分列
- 拉面馆中的移动互联网——无线KPI探讨
拉面馆中的移动互联网——无线KPI探讨 伴随着这几年超高速发展,移动互联网早已经度过了小米加步枪的散兵游击状态,随着各大公司持重金杀入,无线从几个人的Team,到快速发展为几十.上百人甚至上千人的大部 ...
- Emgu学习之(二)——图像读取、显示、保存
visual Studio Community 2015 工程和源代码:http://pan.baidu.com/s/1o6u5Fdw 内容 在这篇文章中将提到以下内容: 从文件中读取图像 Image ...
- Java web小记
1.Java Web设置页面刷新的方法(两种): response.setHeader("refresh", "0.3," + request.getHeade ...
- 寻虫记:BOM头制造的冤案,无故多出空白行
最近在做的一个网站发生了一个很诡异的BUG: 使用IE浏览页面时,一切都挺正常: 而使用Firefox浏览时,发现某些页面元素之间的距离比预期的要宽很多,HTML元素本身的hight.padding和 ...
- CSS2-3常见的demo列子总结
CSS2-3常见的demo列子总结 阅读目录 1. css超过一行或者多行后显示省略号. 2. css图片未知高度垂直居中完美解决方案. 3. 学习使用 :before和 :after伪元素 回到顶部 ...