動態添加input表單元素的js代碼

addinput.js

//======================
//功能:在表單中input file控制項
//參數:parentID---要插入input file控制項的父元素ID
// inputID----input file控制項的ID,這個一定要和name保持一致的，否則會出問題
// maxNum --- 最大數量 0為不限制
//======================
function createInput(parentID,inputFileID, maxNum){

if (maxNum > 0) {
x=document.getElementsByName(inputFileID);
y=x.length;
if (y >= maxNum) {
alert('最多隻允許添加' + maxNum + '個');
return false;
}
}

var parent=$G(parentID);//擷取父元素

var div=document.createElement("div");//建立一個div容器tb用於包含input file
var x=parseInt(Math.random()*(80-1))+1;
var divName=inputFileID+x.toString();//隨機div容器的名稱
div.name=divName;
div.id=divName;

var aElement=document.createElement("input"); //建立input
aElement.name=inputFileID;
aElement.id=inputFileID;
aElement.type="text";//設定類型為file
aElement.className = "dynInputLen";

var delBtn=document.createElement("input");//再建立一個用於刪除input file的Button
delBtn.type="button";
delBtn.value=" ";
delBtn.className = "btn_del";
delBtn.onclick=function(){ removeInput(parentID,divName)};//為button設定tbonclick方法

div.appendChild(aElement);//將input file加入div容器
div.appendChild(delBtn);//將刪除按鈕加入div容器
parent.appendChild(div);//將div容器加入父元素
}
//============================
//功能:刪除一個包含input file的div 容器
//參數:parentID---input file控制項的父元素ID
// DelDivID----個包含input file的div 容器ID
//============================
function removeInput(parentID,DelDivID){
var parent=$G(parentID);
parent.removeChild($G(DelDivID));
}
//通過元素ID擷取文檔中的元素
function $G(v){return document.getElementById(v);}

在html裡引入addinput.js檔案.html代碼如下：

<div id="div_zc" class="dynInput">
  <input name="zhuancheng[]" type="text" id="zhuancheng" value="" maxlength="50" />
  </div>
  <div style="clear:both;margin-top:10px; padding-left:5px;">
  <input type="button" onClick="createInput('div_zc','zhuancheng[]', 3)" name="button" id="button" value="+ 添加(限3條)" class="btn_add">
可以設定最多可以添加多少個input,如果設定為0的話，則表示不限制數量。

作者：tbwshc