<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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" />
<input class="form-control" name="fields1[]" 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>
<br />
<br />
<div class="entry2 input-group col-xs-3">
<input class="form-control" name="fields2[]" type="text" placeholder="Type something" />
<input class="form-control" name="fields3[]" type="text" placeholder="Type something" />
<span class="input-group-btn">
<button class="btn btn-success btn-add2" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
<br />
<br />
<div class="entry3 input-group col-xs-3">
<input class="form-control" name="fields4[]" type="text" placeholder="Type something" />
<input class="form-control" name="fields5[]" type="text" placeholder="Type something" />
<span class="input-group-btn">
<button class="btn btn-success btn-add3" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</form>
<br>
<small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another form field :)</small>
</div>
</div>
</div>
</div>
.entry:not(:first-of-type)
{
margin-top: 10px;
}
.glyphicon
{
font-size: 12px;
}
var MAX_OPTIONS = 5;
var CUR_OPTIONS_1 = 1;
var CUR_OPTIONS_2 = 1;
var CUR_OPTIONS_3 = 1;
$(function()
{
$(document).on('click', '.btn-add', function(e)
{
e.preventDefault();
console.log("CUR_OPTIONS_1 " + CUR_OPTIONS_1);
if (CUR_OPTIONS_1 < MAX_OPTIONS) {
CUR_OPTIONS_1 += 1;
console.log("CUR_OPTIONS_1 " + CUR_OPTIONS_1);
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).insertAfter(currentEntry);
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();
console.log("CUR_OPTIONS_1 " + CUR_OPTIONS_1);
CUR_OPTIONS_1 -= 1;
console.log("CUR_OPTIONS_1 " + CUR_OPTIONS_1);
if (CUR_OPTIONS_1 === 0) {
CUR_OPTIONS_1 = 1;
}
e.preventDefault();
return false;
});
$(document).on('click', '.btn-add2', function(e)
{
e.preventDefault();
console.log("CUR_OPTIONS_2 " + CUR_OPTIONS_2);
if (CUR_OPTIONS_2 < MAX_OPTIONS) {
CUR_OPTIONS_2 += 1;
console.log("CUR_OPTIONS_2 " + CUR_OPTIONS_2);
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry2:first'),
newEntry = $(currentEntry.clone()).insertAfter(currentEntry);
controlForm.find('.entry2:not(:last) .btn-add2')
.removeClass('btn-add2').addClass('btn-remove2')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}
}).on('click', '.btn-remove2', function(e)
{
$(this).parents('.entry2:first').remove();
console.log("CUR_OPTIONS_2 " + CUR_OPTIONS_2);
CUR_OPTIONS_2 -= 1;
console.log("CUR_OPTIONS_2 " + CUR_OPTIONS_2);
if (CUR_OPTIONS_2 === 0) {
CUR_OPTIONS_2 = 1;
}
e.preventDefault();
return false;
});
$(document).on('click', '.btn-add3', function(e)
{
e.preventDefault();
console.log("CUR_OPTIONS_3 " + CUR_OPTIONS_3);
if (CUR_OPTIONS_3 < MAX_OPTIONS) {
CUR_OPTIONS_3 += 1;
console.log("CUR_OPTIONS_3 " + CUR_OPTIONS_3);
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry3:first'),
newEntry = $(currentEntry.clone()).insertAfter(currentEntry);
controlForm.find('.entry3:not(:last) .btn-add3')
.removeClass('btn-add3').addClass('btn-remove3')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}
}).on('click', '.btn-remove3', function(e)
{
$(this).parents('.entry3:first').remove();
console.log("CUR_OPTIONS_3 " + CUR_OPTIONS_3);
CUR_OPTIONS_3 -= 1;
console.log("CUR_OPTIONS_3 " + CUR_OPTIONS_3);
if (CUR_OPTIONS_3 === 0) {
CUR_OPTIONS_3 = 1;
}
e.preventDefault();
return false;
});
});
