利用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. Mac电脑Tomcat下载及安装(详细)

    下载Tomcat 1.打开Apache Tomcat官网,选择你需要的版本进行下载: 地址http://tomcat.apache.org/download-70.cgi   2.解压apache-t ...

  2. Vue.js:目标结构

    ylbtech-Vue.js:目标结构 1.返回顶部 1. Vue.js 目录结构 上一章节中我们使用了 npm 安装项目,我们在 IDE(Eclipse.Atom等) 中打开该目录,结构如下所示: ...

  3. 数据分析工具pandas简介

    什么是Pandas? Pandas的名称来自于面板数据(panel data)和Python数据分析(data analysis). Pandas是一个强大的分析结构化数据的工具集,基于NumPy构建 ...

  4. 「小程序JAVA实战」微信小程序的简要注册流程(二)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-02/ 了解了小程序的历史和它未来的前景,我们开始注册小程序 注册小程序 可以参考官网介绍:http ...

  5. libevent网络编程汇总

    libevent源码剖析: ========================================================== 1.libevent源码剖析一(序) 2.libeve ...

  6. Android studio如何和VS的region一样折叠代码

    相信用过VS的朋友都会经常有用到VS的region来折叠代码,非常方便.那么Android studio是否可以呢?当然可以. 选择代码,Ctrl + Alt + T 选择 第二项,这样就可以啦

  7. java Integer类的缓存(转)

    首先看一段代码(使用JDK 5),如下: public class Hello { public static void main(String[] args) { int a = 1000, b = ...

  8. 判定元素是否刚插入到DOM树

    上接<这篇博文>,其应用于avalon的if绑定.如果一个节点还没有插入DOM树,那么avalon将延时对它进行扫描渲染,直到它再次插入到DOM树为止.由于CSS3 keyframe动画的 ...

  9. 6410中的PWM&nbsp;定时器

    看了OK6410的手册,感觉晕晕的. 需要整理一下思路. 我觉得主要的知道下面这几个内容吧. 1. 定时器的电路结构. 2. 定时器的工作原理是什么.定时器如何来使用.{使用的时序是什么,在时间轴上各 ...

  10. IAR&nbsp;FOR&nbsp;ARM&nbsp;各版…

    用过Keil和IAR,个人感觉是IAR还是很不错的.下载地址是: http://files.iar.com/ftp/pub/box/CD-EWARM-6301-3142.zip V6.30.1(该地址 ...