This content originally appeared on CodyHouse and was authored by CodyHouse
Download + Demo
How To
The Repeater Plugin can be used to clone and delete a collection of items.
The element with a class of .js-repeater__item will be repeated each time the user clicks on the .js-repeater__add button; the new element is appended to the .js-repeater__list element.
<div class="js-repeater">
<ul class="js-repeater__list">
<li class="js-repeater__item">
<!-- content to be repeated here -->
</li>
</ul>
<button class="js-repeater__add" type="button">Add More</button>
</div>Use a button with a class of .js-repeater__remove inside the .js-repeater__item element to have the option of removing clones.
If you want to add a custom class to the cloned elements, add a data-repeater-class attribute to the .js-repeater element:
<div class="js-repeater" data-repeater-class="repeater__item">
<ul class="js-repeater__list">
<li class="js-repeater__item">
<!-- content to be repeated here -->
</li>
</ul>
<button class="js-repeater__add" type="button">Add More</button>
</div>For example, you can use this class to show the .js-repeater__remove button for clones, while keeping it hidden for the first item.
Form fields repeater #
If you are using this component to clone form fields, then each clone must have input elements with different name/id attributes.
For the plugin to work properly, all your inputs should have name and id values equal to customName[n][inputType], where:
customName: a custom label of your choice (same value for all your input elements);n: index of the cloned element (starting from 0);inputType: a custom label that identifies the input.
Add to the .js-repeater element a data-repeater-input-name attribute equal to customName[n].
Here's an example of a repeater for a user name/email block:
<div class="js-repeater" data-repeater-input-name="user[n]">
<div class="js-repeater__list">
<fieldset class="js-repeater__item">
<div>
<label for="user[0][name]">Name</label>
<input type="text" name="user[0][name]" id="user[0][name]">
</div>
<div>
<label for="user[0][email]">Email</label>
<input type="email" name="user[0][email]" id="user[0][email]">
</div>
</fieldset>
<!-- example of a cloned element -> [n] is now [1] -->
<fieldset class="js-repeater__item">
<div>
<label for="user[1][name]">Name</label>
<input type="text" name="user[1][name]" id="user[1][name]">
</div>
<div>
<label for="user[1][email]">Email</label>
<input type="email" name="user[1][email]" id="user[1][email]">
</div>
</fieldset>
</div>
<button class="btn btn--primary js-repeater__add" type="button">Add More</button>
</div>Note that we have added a type="button" to the .js-repeater__add element. This will prevent the form from being submitted when the user clicks the button.
This content originally appeared on CodyHouse and was authored by CodyHouse
CodyHouse | Sciencx (2021-02-03T08:14:25+00:00) Component – Repeater. Retrieved from https://www.scien.cx/2021/02/03/component-repeater/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.