Repeater Field with Bootstrap

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.

Edit: More than one Input-Field

If you want to repeat more than one input field you can use the exact same logic. Just build an inline-form and put it in the entry-div.

In my example I’m repeating two input-boxes instead of one by replacing the form with the following:

 <form role="form" class="form-inline">
     <div id="myRepeatingFields">
         <div class="entry inline-form col-xs-12">
                <input class="form-control" name="fields[]" type="text" placeholder="Placeholder" />
                <input class="form-control" name="fields2[]" type="text" placeholder="Placeholder" />
                <button type="button" class="btn btn-success btn-lg btn-add">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                </button>
           </div>
      </div> 
 </form>

Remember to append to all input names a [] to be able to gather and submit lists.