首页 > 网站开发 > [个人笔记,要点记录]一个动态创建表单元素例子

[个人笔记,要点记录]一个动态创建表单元素例子

最后更新: 2015-07-07    浏览次数:     

一个动态创建表单元素例子: 查看例子

本例用到了以下的一些要点(红色重点):
动态添加表单元素input,
createElement使用,
创建div,
createTextNode,
创建文字,
创建input,
设置input的name, id, type, value,
input赋值无效,
使用setAttribute赋值,
设置onclick
设置onchange
使用createTextNode创建多个空格的方法,
使用 \u00A0 十六进制编码即可,
js代码: document.createTextNode(‘\u00A0\u00A0\u00A0\u00A0′),
获取页面所有input的value,
获取页面所有input, 类型为text的value,
获取指定ID下面的input为text的ID和value,
js判断奇偶,
js去除字符串最后一个字符,
日历控件laydate的使用.

一切要点都在例子源码.

截图:

[个人笔记,要点记录]一个动态创建表单元素例子 - diê-biāng - 1

动态添加表单元素input,createElement使用,创建div,createTextNode,创建文字,创建input,设置input的name, id, type, value

部分代码:
 

<html>
<head>
<title>一个动态创建表单元素例子</title>
<script src="laydate/laydate.js"></script>
<script language="javascript" type="text/ecmascript">
 
//======================
//功能:在表单中input file控件
//参数:parentID---要插入input file控件的父元素ID
//    inputID----input file控件的ID
//======================
function createInput(parentID,inputFileID,kaishishijian,tuifangshijian){
  var parent=$(parentID);//获取父元素
 
  var div=document.createElement("div");//创建一个div容器用于包含input file
  var x=parseInt(Math.random()*(80-1))+1;
  var divName=inputFileID+x.toString();//随机div容器的名称
  div.name=divName;
  div.id=divName;
 
    var  tips_1=document.createTextNode("入住日期: ");
  var  aElement_1=document.createElement("input"); //创建input
  //aElement_1.name=inputFileID;
  //aElement_1.id=inputFileID;
  //aElement_1.type="file";//设置类型为file
    aElement_1.name = kaishishijian;
    aElement_1.id = tuifangshijian;
    aElement_1.type = "text";//设置类型为file
    //aElement_1.value = kaishishijian;//无效, 使用以下代码
    aElement_1.setAttribute("value",kaishishijian);
    aElement_1.onclick=function(){ laydate({format: 'YYYY-MM-DD',choose: function(dates){ ALLOK() }})  };
    aElement_1.onchange=function(){ ALLOK()  };
 
    var  tips_2=document.createTextNode("  \u00A0\u00A0\u00A0\u00A0  退房日期: ");
    var  aElement_2=document.createElement("input"); //创建input
    aElement_2.name = tuifangshijian;
    aElement_2.id = tuifangshijian;
    aElement_2.type = "text";//设置类型为file
    //aElement_2.value = tuifangshijian;//无效, 使用以下代码
    aElement_2.setAttribute("value",tuifangshijian);
    aElement_2.onclick=function(){ laydate({format: 'YYYY-MM-DD',choose: function(dates){ ALLOK() }})  };
    aElement_2.onchange=function(){ ALLOK()  };
 
    var  tips_3=document.createTextNode("  \u00A0\u00A0\u00A0\u00A0   ");
 
  var delBtn=document.createElement("input");//再创建一个用于删除input file的Button
  delBtn.type="button";
  delBtn.value="删除预订";
  delBtn.onclick=function(){ removeInput(parentID,divName); ALLOK() };//为button设置onclick方法
 
    div.appendChild(tips_1);
  div.appendChild(aElement_1);//将input file加入div容器
    div.appendChild(tips_2);
    div.appendChild(aElement_2);//将input file加入div容器
    div.appendChild(tips_3);
  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=$(parentID);
 parent.removeChild($(DelDivID));
}
 
//通过元素ID获取文档中的元素
function $(v){return document.getElementById(v);}
 
//初始化, 预订状态
function chushihua()
{
    //var brief = {$goods.goods_brief|escape} = "2015-06-15/2015-06-17|2015-06-22/2015-06-23|2015-07-02/2015-07-11";
    var brief = "2015-06-15/2015-06-17|2015-06-22/2015-06-23|2015-07-02/2015-07-11";
    var shijianduanS = brief.split("|");        //shijianduan = new Array("2015-06-15/2015-06-17","2015-06-22/2015-06-23","2015-07-02/2015-07-11");
    var yiyuding = new Array();
    var i;
    var jiajia = 0;
 
    for (i in shijianduanS)
    {
        //alert( shijianduanS[i] );
        var shijianduan = shijianduanS[i].split("/");
        createInput('list_yuding',shijianduan[0]+'_随机标识_',shijianduan[0],shijianduan[1]);
    }
 
}
 
function getdate()
{
 
 //获取ID为list_yuding下面的input为text的ID和value,如果是页面所有的input则将document.getElementById("list_yuding")换为document即可
 var list=document.getElementById("list_yuding").getElementsByTagName("input");
 
 var strData="";
 var intJiou = 1;
  //对表单中所有的input进行遍历
 for(var i=0;i<list.length && list[i];i++)
 {
       //判断是否为文本框
       if(list[i].type=="text"&&list[i].id!="subEmail")
       {
            //strData +=list[i].id+":"+list[i].value+"--";
            var jiou = intJiou % 2;         //判断intJiou 奇偶
            if (jiou == 0)
            {
                //alert("该整数是偶数!");
                strData += list[i].value+"|";          
 
            }
            else if (jiou ==1)
            {
                //alert("该整数是奇数!");
                strData += list[i].value+"/";
            }
            intJiou ++;
       }
 }
 return strData;
}
 
function ALLOK()
{
    //alert(getdate());
    var shijians = getdate();
    if(shijians != "")
    {
        shijians=shijians.substring(0,shijians.length-1);
    }
 
    document.getElementById('goods_brief').value = shijians;
}
 
 window.onload = chushihua;//不要括号
 
</script>
 
</head>
 
<body>
 
已预订日期:
<br>
<textarea name="goods_brief" id="goods_brief" cols="80" rows="5">  </textarea>
<br><br>
<div id="list_yuding" >
 
</div>
 
<br>
 
<input type="button" onClick="createInput('list_yuding','新加时间段___随机标识_','输入入住日期','输入退房日期')" name="button" id="button" value="+ 添加预订日期">
 
<div>
 
</div>
 
<input type="hidden" onClick="ALLOK()" name="button" id="button" value="全部确定">
 
</body>
</html>