利用javascript增加form的input

這是js的部份

//用來區分不同input的name
var element_count = 0; function add_element(obj)
{
element_count++;
//先建立一個input的tag
var new_element = document.createElement("input");
//設定這個input的屬性
//可以這樣用
new_element.type = "text";
new_element.name = "new" + element_count;
new_element.value = element_count;
//也可以這樣用
new_element.setAttribute("type","text");
new_element.setAttribute("name","new" + element_count);
new_element.setAttribute("value",element_count);
//最後再使用appendChild加到要加的form裡
obj.form.appendChild(new_element);
//換行用~ 一樣是要加到form裡
var s = document.createElement("br");
obj.form.appendChild(s);
}

這是html的部份

<form name="myform">
<input type="button" value="增加input" onclick="add_element(this)"><br />
</form>

转:[web]javascript 增加表單的input的更多相关文章

  1. Flask從入門到入土(三)——Web表單

    Flask-WTF擴展可以把處理Web表單的過程變成一種愉悅的體驗.這個擴展對獨立的WTForms包進行了包裝,方便集成到Flask程序中. Flask-WTF及其依賴可使用pip安裝: pip in ...

  2. JavaScript常用表单验证正则表达式(身份证、电话号码、邮编、日期、IP等)

    身份证正则表达式 //身份证正则表达式(15位)isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;//身份证正则表达式 ...

  3. ajax form表单提交 input file中的文件

    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...

  4. HTML表单之input元素的23种type类型

    摘自:http://www.cnblogs.com/xiaohuochai/p/5179909.html 了解HTML表单之input元素的23种type类型 随着HTML5的出现,input元素新增 ...

  5. 了解HTML表单之input元素的30个元素属性

    目录 传统属性 name type accept alt checked disabled readonly maxlength size src value 新增属性 autocomplete au ...

  6. web网页的表单排版利器--960css

    表单排版样式 960css 前言 一般web网页的表单排版,大家都习惯用table排版,自己需要根据实际需要去定义TR和TD,很多时候对于TD的高宽度.是否合并行,合并列,都要去做一些处理,这些都是比 ...

  7. [MVC4-基礎] 使用DataAnnotations+jQuery進行表單驗證

    我目前有以下表單,Select部分因為必須上一層有選擇下層才有資料,因此使用jQuery驗證問題類型是否有選擇就好,而問題描述要驗證是否為空,這裡採用MVC內建的DataAnnotations來驗證. ...

  8. vue表單

    使用v-model進行表單雙向數據綁定. 可以根據控件決定數據的類型,可以綁定input.單選.複選.下拉框等 可以使用number和trim等修飾符.

  9. 项目总结15:JavaScript模拟表单提交(实现window.location.href-POST提交数据效果)

    JavaScript模拟表单提交(实现window.location.href-POST提交数据效果) 前沿 1-在具体项目开发中,用window.location.href方法下载文件,因windo ...

随机推荐

  1. python3+ros+telnet+telnetlib

    利用python3的telnetlib模块 远程登录ros,输入帐号密码,然后执行命令,并导出结果到txt文本: 不过实际操作这种方式不行,因为telnet导出来的文本文件,带颜色编码,根本无法看哦. ...

  2. modelform实例学习

    先来回顾下form的用法 一对多关系,form显示的是下拉框 多对多关系,form显示的是多选框 modelform的用法 modelsform的写法 from django.forms import ...

  3. GNS3连接虚拟机

      打开GNS3,拖一台路由器和主机   右击主机,选择配置   添加虚拟机的网卡为主机网卡,(选择VM1或VM8)   路由器选择虚拟机网卡连接   打开虚拟机在导航栏找到“虚拟机”-->“设 ...

  4. javascript第三节

    面向对象的程序设计 1.属性类型 ECMAScript中有两种属性:数据属性和访问器属性 数据属性: configurable设置为false,表示不能从对象中删除属性. 访问器属性: 支持定义多个属 ...

  5. 24-从零玩转JavaWeb-包装类、自动装箱、自动拆箱

    一.什么是包装类 二.对基本数据类型包装的好处 三.装箱操作 四.拆箱操作 五.自动装箱 六.自动拆箱 七.字符串与基本数据类型和包装类的转换   八.包装类的缓存设计

  6. json和pickle序列化模块

    一.json序列化模块 1.序列化:将内存数据转成字符串加以保存. 2.反序列化:将字符串转成内存数据加以读取. data = { '北京':{ '五道口':{ 'sohu':'引擎', } } } ...

  7. 深入剖析SolrCloud(四)

    作者:洞庭散人 出处:http://phinecos.cnblogs.com/ 本博客遵从Creative Commons Attribution 3.0 License,若用于非商业目的,您可以自由 ...

  8. fastcgi_finish_request

    本问原地址 http://www.phpddt.com/php/fastcgi_finish_request.html 某些操作,如用户注册后邮件发送,记录日志等一些耗时操作可以转化为异步操作!当PH ...

  9. Win10 pip安装pycocotools报错解决方法(cl: 命令行 error D8021 :无效的数值参数“/Wno-cpp”)

    参考: https://blog.csdn.net/chixia1785/article/details/80040172 https://blog.csdn.net/gxiaoyaya/articl ...

  10. 680. Valid Palindrome II 对称字符串-可删字母版本

    [抄题]: Given a non-empty string s, you may delete at most one character. Judge whether you can make i ...