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.


<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>
<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.


    margin-top: 10px;
    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):

    $(document).on('click', '.btn-add', function(e)
        var controlForm = $('#myRepeatingFields:first'),
            currentEntry = $(this).parents('.entry:first'),
            newEntry = $(currentEntry.clone()).appendTo(controlForm);
        controlForm.find('.entry:not(:last) .btn-add')
    }).on('click', '.btn-remove', function(e)
        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.


Please enter your comment!
Please enter your name here