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的話，則表示不限制數量。