"dynamic"
Bootstrap 3.3.0 Snippet by canvsr

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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="control-group" id="fields">
<label class="control-label" for="field1">Nice Multiple Form Fields</label>
<div class="controls">
<form role="form" autocomplete="off">
<div class="entry input-group col-xs-3"> <input class="form-control" name="fields[]" type="text" placeholder="Type something" /> <span class="input-group-btn"> <button class="btn btn-success btn-add" type="button"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div>
</form>
</div>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
.entry:not(:first-of-type) { margin-top: 10px; } .glyphicon { font-size: 12px; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function() {
$(document).on('click', '.btn-add', function(e) {
e.preventDefault();
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add').removeClass('btn-add').addClass('btn-remove').removeClass('btn-success').addClass('btn-danger').html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function(e) {
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: