博客

js动态生成form

  • Post author:
  • Post category:其他


function gg(){
 var radio = document.createElement("input");<a target=_blank href="http://write.blog.csdn.net/import">博客搬家</a>
 radio.type="radio";//添加type属性<input type="radio">
 radio.id = "r1";
 document.getElementById('v').appendChild(radio);//添加
 //document.getElementById("div or other container'ID").removeChild(radio);//删除
}


/*下拉列表,多选框document.createElement("select");文本框document.createElement("input");
多选框添加
multiple和size属性即可*/

 

 

 =================================================================================================

//向页面添加表单元素
// mParent 要添加的表单元素的父元素的ID值
// mType 要添加的表单元素的类型["text","password","radio","checkbox","hidden","button","reset","submit"]
// mID 要添加的表单元素的ID
// mClassName 要添加的表单元素的class
// mName 要添加的表单元素的name
// mText 要添加的表单元素为["radio","checkbox"]时的文本
//mValue 要添加的表单元素的value
function CreateFormUtil(mParent,mType,mID,mClassName,mName,mText,mValue)
{
  var parentTemp=document.getElementById(mParent)
  var inputTemp=document.createElement("input")
  inputTemp.type=mType
  if(mID!=""){inputTemp.id=mID}
  if(mClassName!=""){inputTemp.className=mClassName}
  if(mName!=""){inputTemp.name=mName}
  if(mValue!=""){inputTemp.value=mValue}
  parentTemp.appendChild(inputTemp)//向父元素中插入表单项
  if(mText!="") //如果是radio/checkbox
  {
  var txtTemp=document.createTextNode(mText)
  parentTemp.appendChild(txtTemp)
  }   
}

//向页面添加表单元素select
//mText select的options的text,数组["txt1","txt2",...]
//mValue select的options的value,数组["value1","value2",...]
function CreateSelect(mParent,mID,mClassName,mName,mText,mValue)
{
  var parentTemp=document.getElementById(mParent)
  var inputTemp=document.createElement("select")
  if(mID!=""){inputTemp.id=mID}
  if(mClassName!=""){inputTemp.className=mClassName}
  if(mName!=""){inputTemp.name=mName}
  parentTemp.appendChild(inputTemp)//向父元素中插入表单项
  if(mText.length>=1)
  {
  for(var i=0;i<mText.length;i++) //循环添加options
  {
  putOption(inputTemp,mText[i],mValue[i])
  }   
  }  
}

//往一个下拉列表中增加一项
//
function putOption(objSelect,t,v)
{
  var objOpt=document.createElement("option")
  objOpt.text=t   
  objOpt.value=v
  try
  {
    
  objSelect.add(objOpt);
  }
  catch(e)
  {
  objSelect.add(objOpt,null);
  }
}

=================================================================================================

<html>   
    <head>   
        <title>动态添加表单元素</title>   
    </head>   
    <script language="javascript">      
       
    //以下代码是动态添加表单元素。   
       
    var elementCount = 0;    
     
    //动态增加表单元素。   
    function AddElement(mytype){      
        //得到需要被添加的html元素。   
        var TemO=document.getElementById("add");      
        //创建一个指定名称（名称指定了html的类型）html元素。   
        var newInput = document.createElement("input");       
           
        elementCount = elementCount + 1;      
           
        //指定input的类型。   
        newInput.type=mytype;       
           
        //动态生成id。   
        newInput.id="input"+(elementCount);      
              
        TemO.appendChild(newInput);      
              
        var newline= document.createElement("br");    
           
        newline.id = "br"+(elementCount);    
           
        TemO.appendChild(newline);      
    }      
       
    //动态删除表单元素。      
    function delElement(mytype){      
        var TemO=document.getElementById("add");      
           
        if (elementCount>0){      
            var newInput = document.getElementById("input"+elementCount);       
              
            TemO.removeChild(newInput);    
      
            var newline= document.getElementById("br"+(elementCount));    
               
            elementCount = elementCount - 1;     
               
            TemO.removeChild(newline);      
        }    
    }      
    </script>   
       
    <body>   
        <input name="" type="button" value="新建文本框"  
            onClick="AddElement('text')" />   
        <input name="" type="button" value="新建复选框"  
            onClick="AddElement('checkbox')" />   
        <input name="" type="button" value="新建单选框"  
            onClick="AddElement('radio')" />   
        <input name="" type="button" value="新建文件域"  
            onClick="AddElement('file')" />   
        <input name="" type="button" value="新建密码框"  
            onClick="AddElement('password')" />   
        <input name="" type="button" value="新建提交按钮"  
            onClick="AddElement('submit')" />   
        <input name="" type="button" value="新建恢复按钮"  
            onClick="AddElement('reset')" />   
        <input name="" type="button" value="删除恢复按钮"  
            onClick="delElement('reset')" />   
        <br>   
        <form action="" method="get" name="frm">   
            <div id="add">   
                <input type="text" name="textfield">   
                <br>   
            </div>   
        </form>   
    </body>   
</html>