JavaScript实现动态添加Form表单元素的方法示例

本文实例讲述了JavaScript实现动态添加Form表单元素的方法。分享给大家供大家参考，具体如下：

之前写过类似的文章（如：javascript实现的动态添加表单元素input,button等）,现在看来比较初级,弄一个高级的简单的

情景: 后台要上传游戏截图,截图数量不确定,因此使用动态添加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相关内容感兴趣的读者可查看本站专题：《JavaScript表单(form)操作技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • 用JS动态改变表单form里的action值属性的两种方法

    方法1: <form id="form1" name="form1" method="post" action="../news/index.asp"> <table width="100%" height="43" border="0" cellpadding="0" cellspacing="0">

  • javascript写的一个表单动态输入提示的代码

    *{ margin:0px;padding:0px;font-size:12px; } input{ width:100px;height:20px;border:1px solid #ccc; } function tips(id,str){ var l=document.getElementById(id).offsetLeft+120; var t=document.getElementById(id).offsetTop; document.getElementById("tips&qu

  • js form action动态修改方法

    一般比较简单的就是document.formName.action="/dddd.do?ddd="+str document.formName.submit(); 写成函数式的调用就是 复制代码 代码如下: <script language="JavaScript" > function checkaction(v){ if(v==0){ document.dbform.action="index.php?admin_db-repair&quo

  • javascript创建动态表单的方法

    本文实例讲述了javascript创建动态表单的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

  • javascript实现的动态添加表单元素input,button等(appendChild)

    写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程! 我想各位在很多网站上都看到过类似的效果! 1.先用document.createElement方法创建一个input元素! 复制代码 代码如下: var newInput = document.createElement("input"); 2.设定相关属性,如name,type等  复制代码 代码如下: newInput.type=mytype;   newInput.name="input1"

  • Js为表单动态添加节点内容的方法

    Js为表单动态添加节点内容的方法

    本文实例讲述了Js为表单动态添加节点内容的方法.分享给大家供大家参考.具体如下: 1. 代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtm

  • js动态生成form 并用ajax方式提交的实现方法

    Js代码: var tempForm = document.createElement("form"); tempForm.action="http://localhost:8080/test/user"; tempForm.method="post"; document.body.appendChild(tempForm); //create a submit button var tempInput = document.createElem

  • JavaScript实现动态增加文件域表单

    js代码: 复制代码 代码如下: <script language="javascript"> //全局变量,代表文件域的个数,并用该变量区分文件域的name属性 var file_count = 0; //增加文件 域 function additem(id) { if (file_count > 9) { alert("最u22810 10个u25991 件u22495 "); return; } //定义行变量row:单元格变量cell:单元

  • JavaScript动态创建form表单并提交的实现方法

    本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 form 演示如下: // JavaScript 构建一个 form function MakeForm() { // 创建一个 form var form1 = document.createElement("form"); form1.id = "form1"; f

  • JavaScript实现动态添加Form表单元素的方法示例

    本文实例讲述了JavaScript实现动态添加Form表单元素的方法.分享给大家供大家参考,具体如下: 之前写过类似的文章(如:javascript实现的动态添加表单元素input,button等),现在看来比较初级,弄一个高级的简单的 情景: 后台要上传游戏截图,截图数量不确定,因此使用动态添加input节点的方法去实现这个效果 主要用到的函数有: document.getElementById(); objNode.parentNode; objNode.cloneNode(); objNo

  • JavaScript获取按钮所在form表单id的方法

    本文实例讲述了JavaScript获取按钮所在form表单id的方法.分享给大家供大家参考.具体如下: 这里使用javascript获取form表单按钮的id,可以通过下面的JS代码获取. <!DOCTYPE html> <html> <body> <h1>www.sharejs.com</h1> <form id="form1"> <button id="button1" type=&q

  • JS document form表单元素操作完整示例

    JS document form表单元素操作完整示例

    本文实例讲述了JS document form表单元素操作.分享给大家供大家参考,具体如下: <html> <head> <title>form表单操作</title> <meta charset="UTF-8"/> <script type="text/javascript"> function testForm(){ // 获取form对象 方法一,通过id,比较普遍的方法 var fm=d

  • Smarty简单生成表单元素的方法示例

    本文实例讲述了Smarty简单生成表单元素的方法.分享给大家供大家参考,具体如下: smarty生成表单元素功能实现的原理是:给smarty一个数组,用于生成和显示菜单或选项,另外在传递一个选项的值,用于默认选择的匹配: 示例如下: php文件:index.php <?php include("smarty_inc.php"); $smarty->assign('cust_ids',array(1000,1001,1002,1003)); $smarty->assig

  • 使用Vue动态生成form表单的实例代码

    具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流:github地址 示例 https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg 安装 npm install form-create OR git clone https://github.com/xa

  • jQuery实现form表单元素序列化为json对象的方法

    jQuery实现form表单元素序列化为json对象的方法

    本文实例讲述了jQuery实现form表单元素序列化为json对象的方法.分享给大家供大家参考,具体如下: 这段代码序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>jQuery扩展--form序列化到json对象</title> <meta http-equiv=Content-Type content=&

  • Angular4实现动态添加删除表单输入框功能

    Angular4实现动态添加删除表单输入框功能

    首先介绍一下实现的效果,就是单一表单能实现添加其他的,也能删除 代码如下: <h5>动态添加表单</h5> <div class="form"> <div class="form-group form-group-sm" *ngFor="let i of login"> <label class="col-form-label">用户名</label> &

  • 动态设置form表单的action属性的值的简单方法

    用jQuery时,可如下设置: form表单: <form name="myform" id="myform" action="ssss" method="post" onsubmit="getUrl();"> javascript方法: <script type="text/javascript"> function getUrl(){ $('form').at

  • 解决layui追加或者动态修改的表单元素“没效果”的问题

    layui版本:2.2.6(考虑到一万年以后会有人遇到类似问题 先做个版本记录) 关于该问题的layui官方文档地址:http://www.layui.com/doc/modules/form.html 官方原文: 有些时候,你的有些表单元素可能是动态插入的.这时 Form模块 的自动化渲染是会对其失效的.虽然我们没有双向绑定机制(因为我们叫经典模块化框架,偷笑.gif) 但没有关系,你只需要执行 form.render(type, filter); 方法即可. 代码样例 $.post('htt

随机推荐