js 动态添加多表单控件 div

动态创建div层:
document.write("<div id='popupmenu'>...</div>);
清除层内容:
document.getElementById("popupmenu").innnerHTML="";
jssay (初级程序员) 2009-10-15
div遮罩层嘛
http://www.windsfly.cn/blog/default.asp?id=660
http://www.cnblogs.com/wjfluisfigo/archive/2009/01/15/1359309.html
 
 

<script type="text/javascript">
 var p=1;
function CreateUpload()
    {
        p++;
        var div=document.createElement('div');
        var html='<img  id=img_view'+p+' style="width: 90px; height: 90px; float: left;margin: 5px;display:none;" />'
         + '<div style="float: left;">'
         +'  类型:<select name="types" id="types'+p+'"><option value="1">荣誉证书</option><option value="2">环境风光</option>'
         +'<option value="3">公共设施</option><option value="4">温馨卧室</option><option value="5">精彩活动</option></select><br />'
         +' 标题:<input type="text" name="imgTitle" id="imgTitle'+p+'" size="30" value="" /><br />'
         +' 图片:<input type="text" readonly="readonly" id="ReviewPic'+p+'" name="ReviewPic" value=""  style="width: 270px;" />'
         +'<input type="button" value="我要上传" οnclick="document.getElementByIdx_x_x(\'frmReviewPic'+p+'\').style.display=(document.getElementByIdx_x_x(\'frmReviewPic'+p+'\').style.display == \'\' ? \'none\' : \'\')" />'
         +'<iframe name="frmReviewPic" id="frmReviewPic'+p+'" frameborder="0" cellpadding="0" width="480"'
         +' height="30" scrolling="no" src="../uploadfile.aspx?space=0&bgcolor=e6eff8&size=35&input=ReviewPic'+p+'"'
         +'bgcolor="#ffffff" style="display: none"></iframe><br />'
         +'描述:<textarea cols="60" rows="2" name="Description" id="Description'+p+'" class="inputtext"></textarea><a href="javascript:" οnclick="RemoveAdd('+p+')">[-]删除</a></div>';
div.innerHTML=html;
div.style.width="780px";
div.style.marginTop="10px";
div.setAttribute("id","upDiv"+p);
//div.id="upDiv"+p;
document.getElementById('uppics').appendChild(div);
    }
function sub()
    {
       var ReviewPic=document.getElementsByName("ReviewPic");
       var Description=document.getElementsByName("Description");
       var imgTitle=document.getElementsByName("imgTitle");
       //alert(o.length);
       for(var i=0;i<ReviewPic.length;i++)
       {
          if(imgTitle[i].value=="")
          {
            alert("您有没有标题的图片上传,请填写标题!");
            imgTitle[i].focus();
            return false;
          }
          if(imgTitle[i].value.length>15)
          {
            alert("第"+(i+1)+"张图片的标题过长,请您更正!");
            imgTitle[i].focus();
            return false;
          }
          if(ReviewPic[i].value=="")
          {
            alert("第"+(i+1)+"张图片没有上传!");
            return false;
          }
       }
      return true;
    }
function RemoveAdd(id)
{
 var div=document.getElementById('upDiv'+id);
 var div2=document.getElementById('uppics');
 div2.removeChild(div);
}  
    </script>

<html>
<head>
</head>
<body>
<div style="width: 100%;" id="uppics">
                                            <div style="width: 100%;" id="upDiv1">
                                                <img id="img_view1" style="width: 90px; height: 90px; float: left; margin: 5px; display: none;" />
                                                <div style="float: left;">
                                                    类型:<select name="types" id="types1"><option value="1">荣誉证书</option>
                                                        <option value="2">环境风光</option>
                                                        <option value="3">公共设施</option>
                                                        <option value="4">温馨卧室</option>
                                                        <option value="5">精彩活动</option>
                                                    </select><br />
                                                    标题:<input type="text" name="imgTitle" id="imgTitle1" value="" size="30" /><br />
                                                    图片:<input type="text" readonly="readonly" id="ReviewPic1" name="ReviewPic" value="" style="width: 270px;" />
                                                    <input type="button" value="我要上传"  οnclick="document.getElementByIdx_x_x('frmReviewPic1').style.display=(document.getElementByIdx_x_x('frmReviewPic1').style.display == '' ? 'none' : '')" />
                                                    <iframe name="frmReviewPic" id="frmReviewPic1" frameborder="0" cellpadding="0" width="480"
                                                        height="30" scrolling="no" src="../uploadfile.aspx?space=0&bgcolor=e6eff8&size=35&input=ReviewPic1"
                                                        bgcolor="#ffffff" style="display: none"></iframe>
                                                    <br />
                                                    描述:<textarea cols="60" rows="2" name="Description" id="Description1" class="inputtext"></textarea>
                                                </div>
                                                <input style="float: left;" class="botton" type="button" οnclick="CreateUpload()"
                                                    value="[+]继续添加" />
                                            </div>
                                        </div>
          </body>
<html>


 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值