利用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. java图形用户界面练习。j2se

    总结:主要是如何布局.还是存在很大问题 package clientFrame; import java.awt.FlowLayout; import javax.swing.JButton; imp ...

  2. 根据当前日期算前一年、前一月、前一天(java基础)

    问题的本身没有什么难度,但是要想一下子找到一个现成的方法还真不是那么容易,本来以为java.util.Date中会有方法结果找了半天没找到,最后还是在Calendar中找到了,记下别忘了!! 核心:使 ...

  3. android欢迎页

    在进入程序后,会在一个页面停留几秒然后自动跳转到程序主界面,这个页面就是欢迎页. 首先新建个java文件,给他起名叫做WelcomeActivity 在里面我们通过一个匿名类new Handler,在 ...

  4. Linux学习笔记 - 入门

    简介 Linux内核最初只是由芬兰人李纳斯·托瓦兹(Linus Torvalds)在赫尔辛基大学上学时出于个人爱好而编写的. Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSI ...

  5. Bash读取/etc/passwd的特殊技巧

    在twitter上看到的,记录一下: 可以bypass基于正则的规则,这里还可以引申出其他的bypass方法,

  6. 小记一次mysql启动失败没有日志的处理

    本来mysql好的,之前清理了一次tmp下的东西,mysql在查询的时候提示: Can't create/write to file '/tmp/ib0n3frL 然后停止启动: [root@sevc ...

  7. springboot成神之——发送邮件

    本文介绍如何用spring发送邮件 目录结构 依赖 MailConfig TestController 测试 本文介绍如何用spring发送邮件 目录结构 依赖 <dependency> ...

  8. 实用webpack-dev-server

    webpack-dev-server的作用 文件作出改动之后,保存,立即开始编译文件 编译后的文件是保存在内存中的,在项目文件夹中看不到编译后的文件 编译完成之后立即自动刷新浏览器 测试webpack ...

  9. Canopy聚类算法

    Canopy聚类算法(经典,看图就明白) 聚类算法. 这个算法获得的并不是最终结果,它是为其他算法服务的,比如k-means算法.它能有效地降低k-means算法中计算点之间距离的复杂度. 图中有一个 ...

  10. Python基础学习四 函数

    1.内置函数 Python内置了很多有用的函数,是可以直接调用的. 参考链接:https://docs.python.org/3/library/functions.html 调用函数的时候,如果传入 ...