js 动态添加多表单控件 div

转载 2012年03月26日 20:48:32
动态创建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="我要上传" onclick="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:" onclick="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="我要上传"  onclick="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" onclick="CreateUpload()"
                                                    value="[+]继续添加" />
                                            </div>
                                        </div>
          </body>
<html>


 

相关文章推荐

JS动态添加div,然后在div中添加元素

需求:    组织部中有个这样的需求,根据年份动态显示该年份下的定性指标!   我的做法:         先是放一个空的div,让后根据指标的数据,动态的往div中添加元素。 代码:  空的d...

jsf动态创建表单控件实例.

  • 2012年06月07日 20:17
  • 8KB
  • 下载

Vue.js笔记-表单控件绑定

基础语法         可以用v-model指令在表单控件元素上创建双向数据绑定,根据控件类型它自动选取正确的方法更新元素。 text Message is: {{ message }}sp...

Vue.js 学习8 表单控件绑定

一、基础用法使用v-model指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。 Message is: {{ message }}2.多行文本Multiline m...
  • xundh
  • xundh
  • 2017年06月03日 10:55
  • 206

Dynamics CRM 2011 编程系列(14):JS编程之表单控件的执行上下文

现在我们来看看表单控件的执行环境上下文吧。这里的执行环境和上节介绍的用户登录环境差不多,控件的执行环境就是表示该控件在什么场景下被调用的。方便事件根据环境来做相应的处理。    我们先来了解下他们吧...

Dynamics CRM 2011 编程系列(11):JS编程之征服表单控件(一)

本节来讨论表单上的常用控件,如:单行文本控件,选项集控件,查找型控件等。看看他们提供些什么方法和属性。     建立测试环境 图1   图2   图3     单行文...

分针网—IT教育:Vue.js事件处理器与表单控件绑定

事件处理主要通过v-on这个指令来执行。 事件监听及方法处理 1.简单的可以直接内嵌在页面。 2.可以通过将方法定义在methods中,然...

Dynamics CRM 2011 编程系列(12):JS编程之征服表单控件(二)

本节我们来讨论表单上的选项卡,导航栏,iframe以及子网格。这些控件在日常开发中并不常用,但有时候通过它们能实现些意想不到的效果。接下来我们就依次来学习它们吧。 选项卡,节 图1   ...

Vue.js学习 Item9 – 表单控件绑定

— title:Vue.js学习 Item9 – 表单控件绑定—基础用法可以用 v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。尽管有点神奇,v-mod...

自定义表单控件

  • 2015年08月13日 18:19
  • 36KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js 动态添加多表单控件 div
举报原因:
原因补充:

(最多只允许输入30个字)