Bootstrap Snippet Add/Remove Input Fields Dynamically using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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="input_fields_wrap">
    <button class="btn btn-primary add_field_button" style="margin-bottom:20px;">Add More Fields</button>
    <div class="col-md-6">
        <input class="form-control" type="text" style="margin-bottom:10px; border:1px solid red;" name="mytext[]">
        </div>
</div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
.remove_field{
    padding:10px;
    border:1px solid #000;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
    
    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });
    
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Add/Remove Input Fields Dynamically"
Bootstrap 3.3.0 Snippet by Divscodebd

Related: See More

Questions / Comments:

"Add/Remove Input Fields Dynamically" Bootstrap 3.3.0 Snippet by Divscodebd

Related: See More

Questions / Comments:

"Add/Remove Input Fields Dynamically"
Bootstrap 3.3.0 Snippet by Divscodebd