Bootstrap Snippet Dynamic Input Control using HTML CSS 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="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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-group">
            <div class="panel panel-default">
                <div class="panel-heading">등록</div>
                <div class="panel-body">
                    <form role="form" id="registForm">
                        <input type="hidden" name="contentCount" value="1" />
                        <div class="form-group">
                            <label for="input-code">명칭</label>
                            <input type="text" class="form-control" id="input-code">
                        </div>
                        <div class="form-group">
                            <label for="content-1">내용</label>
                            <div class="input-group" id="input-group-1">
                                <input type="text" class="form-control" id="content-1">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" id="addContent-1" type="button"><span class="glyphicon glyphicon-plus"></span></button>
                                </span>
                            </div><!-- /input-group -->
                        </div>
                        <div class="form-group">
                            <label for="input-StartDate-1">시작일</label>
                            <input type="date" class="form-control" id="input-StartDate-1" placeholder="시작일">
                        </div>
                        
                        <div class="form-group">
                            <label for="input-EndDate-1">종료일</label>
                            <input type="date" class="form-control" id="input-EndDate-1" placeholder="종료일">
                        </div>
                        
                        <div class="form-group">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
.input-group {
    margin-bottom:10px;
}
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
$(document).ready(function(){
    var contentCount=1;
    
    $("#addContent-1").click(function(e){
        // [Add input]
        // START input-group
        var newDiv = $(document.createElement("div")).attr({id:"input-group-"+(contentCount+1), class:"input-group"});
        
        newDiv.html( "<input type='text' class='form-control' id='content-"+ (contentCount+1) +"'>"
                    +"<span class='input-group-btn'>"
                    +   "<button class='btn btn-danger' id='removeContent-" + (contentCount+1) + "' type='button'>"
                    +       "<span class='glyphicon glyphicon-minus'></span>"
                    +   "</button>"
                    +"</span>"
                    );
        
        $("#input-group-"+contentCount).before(newDiv);
        ++contentCount;
        $("input[name='contentCount']").val(contentCount);
        // END input-group
        
        // [Remove input]
        $("#removeContent-" + contentCount).click(function(e){
            if(contentCount==1){
                alert("No more input to remove");
                return false;
            }   
 
            $("#input-group-" + contentCount).remove();
            --contentCount;
             $("input[name='contentCount']").val(contentCount);
        });
    }); // END $("#addContent11").click(function(e){
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Dynamic Input Control"
Bootstrap 3.0.3 Snippet by SteveYi

Related: See More

Questions / Comments:

"Dynamic Input Control" Bootstrap 3.0.3 Snippet by SteveYi

Related: See More

Questions / Comments:

"Dynamic Input Control"
Bootstrap 3.0.3 Snippet by SteveYi