Every webdeveloper uses forms. And from time to time they need repeatible fields. If you’re using Bootstrap, it is very easy to design them.
I found this snippet somewhere (can’t remember where exactly) and made a few alterations to it.
HTML-Code:
<label class="control-label" for="ourField">Label for our field</label>
<form role="form">
<div id="myRepeatingFields">
<div class="entry input-group col-xs-3">
<input class="form-control" name="fields[]" type="text" placeholder="Placeholder" />
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-lg btn-add">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</span>
</div>
</div>
</form>
<br>
<small>Press <span class="glyphicon glyphicon-plus gs"></span> for another field</small>This is an input-group as shown on the bootstrap documentation page with a few minor changes:
- I added an additional div-layer to group the fields. This way it is easier to target them via javascript if you require additional formfields besides the repeating one.
- The name of the field ends with squared brackets. This way all the inputs with the same name get submited as a list of strings.
CSS-Code:
.entry:not(:first-of-type)
{
margin-top: 10px;
}
.glyphicon
{
font-size: 12px;
}Pretty straight forward. Of course there is much more work needed if you are not using bootstrap.
Java-Script-Code (needs JQuery):
$(function()
{
$(document).on('click', '.btn-add', function(e)
{
e.preventDefault();
var controlForm = $('#myRepeatingFields: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('');
}).on('click', '.btn-remove', function(e)
{
e.preventDefault();
$(this).parents('.entry:first').remove();
return false;
});
});The javascript defines two actions. One for the remove-buttons (line 14) and one for the add-buttons (line 3).
In many cases it is necessary to expand them according to your requierements.
Post a comment if you need help doing this.
You can download a working example here.
