Bootstrap Snippet Girly Dynamic Input Fields 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="//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 ---------->
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
    <div class= "container">
        <br><br>
        <button id="add"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Another Item</button>
         <button id="remove"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Remove a table</button>
         <br><br>
        <div id="div1">
            <table id="table" >
                <tr>
                    <td>Item</td><td><input class="form-control" type="text" id="item" placeholder="e.g Epson Printer"></td>
                </tr>
                <tr>
                    <td>Type</td><td><input class="form-control" type="text" id="type" placeholder="e.g Hardware"></td>
                </tr>
                <tr>
                    <td>Description</td><td><input class="form-control" type="text" id="type" placeholder="e.g Inkjet, Black, with free 3 cartridge "></td>
                 
                </tr>
                <tr>
                    <td>Unit Price</td><td><input class="form-control" type="text" id="item" placeholder="e.g 5,354.00"></td>
                </tr>
                <tr>
                    <td>Quantity</td><td><input class="form-control" type="text" id="qty" placeholder="e.g 3"></td>
                 </tr>
                 <tr>
                    <td>Amount</td><td ><input class="form-control" type="text" id="amount" placeholder="Amount per item displayed here" disabled></td>
                </tr>
            </table>
    
        </div>
    </div>
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
    #div1 td{
        font: 20px grey; 
        font-family: 'Pacifico', cursive;
        padding: 6px;
    
    }
    
    #div1{
        width:30%;
        margin-left: 5%;
        border-radius: 5px;
    }
    
    #table{
    width: 100%;
    margin-bottom: 5px; 
    background: #e06377;
    border-radius: 5px;
    color: white;
    box-shadow: 6px 6px 3px lightgrey;
    }
    
    #add{
        border-radius: 5px;
        background-color:#96ceb4 ;
        margin-left: 8%;
        color: white;
    }
    #remove{
        border-radius: 5px;
        background-color:#ff6f69;
        color: white;
    }
    
input[type="text"], textarea {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(function(){
    $("#remove").click(function(){
        $("#table").remove();
    });
});
$(function(){
    $("#add").click(function(){
        $("#table").clone().appendTo("#div1");
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Girly Dynamic Input Fields"
Bootstrap 3.3.0 Snippet by joanne08

Related: See More

Questions / Comments:

"Girly Dynamic Input Fields" Bootstrap 3.3.0 Snippet by joanne08

Related: See More

Questions / Comments:

"Girly Dynamic Input Fields"
Bootstrap 3.3.0 Snippet by joanne08