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.
Hi,
Thanks to share the repeated field. I found it very useful.
I’m using your file provided in download link, and it’s pretty good.
I just need to add a second column field as soon the visitor press the “+” button.
And I don’t know how to do this. DOn’t know if you can help me. You might be add the solution in your article.
Ex: 1st field “Product” | 2nd field “Quantity” (on same line, and will be add for each + pressed button)
Hi Nico,
I edited my article to answer your question 🙂
Thanks a bunch
Hi,
thanks for your great job.
Please, I have a problem with your script.
When I add a submit input in the form, nothing is happening. I couldn’t to get the value in $_POST with php.
Thanks
Thanks, I’m resolve my problem. I forgot to write action and method forms.
Thanks.
Hi,
thanks for your great job.
in this sample i have problem with select control. when in repeat select, options of select don’t repeat.
I don’t fully understand your problem. But if you give me some more details I will try to assist you.