Bootstrap Snippet Add More Fields Dynamic using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <div class='panel panel-default'>
                                    <div class='panel-heading'>Education</div>
                                    <div class='panel-body'>
                                        <div class='team-list'>
                                            <div class='team-details'>                                              
                                                <div class='individual-fields'>
                                                    <label for="graduation" class="col-sm-3 control-label">Graduation <span class="required-mark">*</span></label>
                                                    <div class="col-sm-9">
                                                        <div class="row no-pad">
                                                        <div class='form-group col-sm-11'>
                                                            <select class="form-control input-lg" name="graduation">
                                                                <option value="">-- Select  --</option>
                                                                <option>Under Graduate</option>
                                                                <option>Graduate</option>
                                                                <option>Post Graduate</option>
                                                                <option>Doctorate </option>
                                                            </select>
                                                        </div>
                                                        <div class=' col-sm-1 close-div-button  close-added-div hidden-div'>
                                                            <a class='delete' title='Delete'><i class="fa fa-trash-o"></i></a>
                                                        </div>                                                                 
                                                        </div>      
                                                    </div>  
                                                    <div style="clear:both;"></div>
                                                </div>
                                                
                                                <div class="form-group">
                                                    <label for="specialisation" class="col-sm-3 control-label">Specialisation <span class="required-mark">*</span></label>
                                                    <div class="col-sm-8">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
/* css for add more item */
 .nextBtn, .finish  {margin-top: 20px;}
.close-div-button{float: right;margin-right: -20px; cursor: pointer;}
.current-field-checkbox { position: relative; height: 40px;margin-left: 27px;}
.close-div-button .delete{ font-size: 22px;line-height: 45px; }
.hidden-div{display: none;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function(){
    $(function(){
    
        // when use click on close button
        $('.team-list').on("click",".close-div-button",function(){
            if($(this).parents('.team-details').find('input[name^=team_id]').val()!='')
            {
                var id=$(this).parents('.team-details').find('input[name^=team_id]').val();
                var r=confirm('Are you sure you want to delete this experience details?');
                if(r==true)
                {
                    $(this).parents('.team-details').remove();
                    $.ajax({
                    url: "/index.php/creative/delete_team",
                    type:"post",
                    data:{"id":id},
                    success:function(data){
                    console.log(data);
                    }
                    });
                    $('.team-list').find('.team-details').last().css("border-bottom","0px");
                }
                else if(r==false){
                return;
                }
            }
            else{
                $(this).parents('.team-details').remove();
                $('.team-list').find('.team-details').last().css("border-bottom","0px");
            }   
        });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Add More Fields Dynamic "
Bootstrap 3.3.0 Snippet by faisalkhan123

Related: See More

Questions / Comments:

"Add More Fields Dynamic " Bootstrap 3.3.0 Snippet by faisalkhan123

Related: See More

Questions / Comments:

"Add More Fields Dynamic "
Bootstrap 3.3.0 Snippet by faisalkhan123