js实现用户自定义表单项

前几天老师联系我们让我们写一个针对学校各种活动的一个网上报名系统，想着应该不难，但写起来也没那么简单。
报名系统需要由老师来发布活动，且由老师来确定报名者需要填写哪些信息，这就要求用户可以自定义一个自己的表单，在网上查了一些资料，简单的实现了。
话不多说，先看效果：
js实现用户自定义表单项
当然也可以将添加的表单项删除：

主要js方法：
insertAdjacentHTML();//在指定位置插入一段html
不懂怎么用可以百度
界面用到了bootstrap的一点样式
js实现用户自定义表单项
上代码：
装button的div:

 <div class="my-title h3">添加报名信息（由报名者填写）</div>
            <div class="my-choose-container" id="choose_container">
                <button class="btn btn-info my-choose-item" onclick="addText(this)" type="button" value="姓名">姓名</button>
                <button class="btn btn-info my-choose-item"
                        onclick="addSelect(this)" type="button" value="年龄">年龄</button>
                <button class="btn btn-info my-choose-item"
                        onclick="addSex(this)" type="button" value="性别">性别</button>
                <button class="btn btn-info my-choose-item"
                        onclick="addText(this)" type="button" value="电话">电话</button>
                <button class="btn btn-info my-choose-item"
                        onclick="addSelect(this)" type="button" value="年级">年级</button>
                <button class="btn btn-info my-choose-item"
                        onclick="addText(this)" type="button" value="身份证号">身份证号</button>
                <button class="btn btn-info my-choose-item"
                        onclick="addText(this)" type="button" value="学号">学号</button>
                <button class="btn btn-info my-choose-item"
                        onclick="addSelect(this)" type="button" value="学院">学院</button>
                <button class="btn btn-info my-choose-item"
                        onclick="addSelect(this)" type="button" value="专业">专业</button>
                <button class="btn btn-info my-choose-item"
                        onclick="addSelect(this)" type="button" value="班级">班级</button>
                <button class="btn btn-info my-choose-item" type="button" data-toggle="modal" data-target="#addModal"  id="addSaltIpGrpBtn"><span class="glyphicon glyphicon-plus"></span></button>//最后的那个+号按钮，用到了bootstrap里的图标
            </div>
            <div class="row form-group">
                <div class="col-lg-6 col-md-offset-2 col-md-6">
                    <input type="button" onclick="activitySubmit()" class="btn btn-success" value="发布">
                </div>
            </div>

点击不同的按钮触发不同的事件（生成不同的html）
script代码：

<script>
    function addText(obj){
        html = '<div class="form-group row">'+
            '<label class="control-label col-lg-2 col-xs-2" for="name">'+
            obj.value+'</label>'+
            '<div class="col-lg-5 col-md-6"  id="ipInput">'+
            '<input class="form-control" type="text" disabled="disabled">'+
            '</div>'+
            '<span class="form-group-btn">'+
            '<button class="btn btn-warning" type="button" data-toggle="tooltip" title="删除" id="'+i+'" onclick="delCenterIpGrp(this)"><span class="glyphicon glyphicon-minus"></span></button>'+
            '</span>'+
            '</div>'
        document.all.choose_container.insertAdjacentHTML('beforeBegin',html)
    };
    function addSex(obj){
        html = '<div class="row form-group">'+
            '<label class="control-label col-lg-2 col-xs-2">性别</label>'+
            '<div class="col-lg-5 col-md-6">'+
            '<div class="btn-group btn-group-justified"data-toggle="buttons">'+
            '<label  class="btn btn-info" id="man_user" disabled="disabled">'+
            '<input  type="radio" name="options"/>'+'男'+
            '</label>'+
            '<label  class="btn btn-info" id="woman_user" disabled="disabled">'+
            '<input  type="radio" name="options"/>女'+
            '</label>'+
            '</div>'+
            '</div>'+
            '<span class="form-group-btn">'+
            '<button class="btn btn-warning" type="button" data-toggle="tooltip" title="删除" id="'+i+'" onclick="delCenterIpGrp(this)"><span class="glyphicon glyphicon-minus"></span></button>'+
            '</span>'+
            '</div>'
        document.all.choose_container.insertAdjacentHTML('beforeBegin',html)
    };
    function addSelect(obj){
        html = '<div class="row form-group">'+
            '<label class="control-label col-lg-2 col-xs-2">'+obj.value+'</label>'+
            '<div class="col-lg-5 col-md-6">'+
            '<select class="form-control" disabled="disabled">'+
            '<option>请选择</option>'+
            '</select>'+
            '</div>'+
            '<span class="form-group-btn">'+
            '<button class="btn btn-warning" type="button" data-toggle="tooltip" title="删除" id="'+i+'" onclick="delCenterIpGrp(this)"><span class="glyphicon glyphicon-minus"></span></button>'+
            '</span>'+
            '</div>'
        document.all.choose_container.insertAdjacentHTML('beforeBegin',html)
    };

想象中用户更好的体验应该是用户可以自己选择要添加下拉框还是单/多选框或者文本框，但让用户自己定义一个下拉框或者单/多选框对用户来说是一个很繁琐的事情，干脆直接都用文本框也能满足我的需求了。

在用户自定义的表单项后面有一个减号按钮，用于删除这个表单项，代码在上面已经贴出来了（每段最后那个span）。
点击后触发delCenterIpGrp(this)；
代码如下：

 function delCenterIpGrp(obj){
        $(obj).parent().parent().remove();
    }

点击加号弹出来的模态框：

<div class="modal fade" id="addModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span></button>
                <h4 class="modal-title">添加报名信息</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label class="control-label">报名信息名称:</label>
                    <input type="text" class="form-control" id="add_info">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="addText(add_info)">添加</button>
            </div>
        </div>
    </div>
</div>

后续关于这个表单的提交方法以及后端的接收方法有时间再更。
注意：文章作者本科在校生，水平十分有限，有问题欢迎指出，勿喷。