How To Create Repeater Field Using Bootstrap

Spread the love

Hello guys,

In this comprehensive tutorial, we’ll delve into the art of creating Repeater Fields, with a special emphasis on harnessing the power of Bootstrap for seamless design incorporation.

Repeater Fields 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>

We’ve implemented the input-group feature from Bootstrap’s official documentation, making some slight modifications:

We’ve introduced an extra div layer to better organize and group the fields. This provides enhanced accessibility for JavaScript targeting, especially when additional form fields are needed alongside the repetitive ones.

Our field names are designed to conclude with square brackets, forming an array. This configuration allows all inputs with the same name to be submitted as a structured list of strings.

Repeater Fields CSS-Code:

.entry:not(:first-of-type)
{
    margin-top: 10px;
}
.glyphicon
{
    font-size: 12px;
}

Repeater Fields 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;
    });
});

To enhance your website’s functionality, it’s essential to include the jQuery Content Delivery Network (CDN).

Edit: More than one Input-Field

Also Read: How To Generate PDF Files using DomPDF In Laravel 9

If you’re looking to employ multiple input fields within your form, you can easily implement the same logic.

In this illustrative case, we demonstrate the replication of two text-boxes, as opposed to just one, by substituting 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>

I trust that this will be of assistance to you…

Leave a Comment