Repeatable Fields
Description
Repeatable Fields is a jQuery plugin which let's you create a set of fields that can be made to repeat. You can do the following to a field that is repeatable:
- Add new instance
- Remove existing instance
- Reposition an instance
The functionality that is provided by this plugin can also be referred to as:
- Dynamic Fields Plugin
- Dynamic Rows plugin
- Add Remove Rows Plugin
Requirements
This plugin requires jQuery and jQuery UI Sortable.
Example
HTML
<div class="repeat">
<table class="wrapper" width="100%">
<thead>
<tr>
<td width="10%" colspan="4"><span class="add">Add</span></td>
</tr>
</thead>
<tbody class="container">
<tr class="template row">
<td width="10%">
<span class="move">Move Row</span>
<span class="move-up">Move Up</span>
<input type="text" class="move-steps" value="1" />
<span class="move-down">Move Down</span>
</td>
<td width="10%">An Input Field</td>
<td width="70%">
<input type="text" name="an-input-field[{{row-count-placeholder}}]" />
</td>
<td width="10%"><span class="remove">Remove</span></td>
</tr>
</tbody>
</table>
</div>
JavaScript
jQuery(function() {
jQuery('.repeat').each(function() {
jQuery(this).repeatable_fields();
});
});
Options
wrapper: '.wrapper',
container: '.container',
row: '.row',
add: '.add',
remove: '.remove',
move: '.move',
move_up: '.move-up',
move_down: '.move-down',
move_steps: '.move-steps',
template: '.template',
is_sortable: true,
before_add: null,
after_add: self.after_add,
before_remove: null,
after_remove: self.after_remove,
sortable_options: null,
row_count_placeholder: '{{row-count-placeholder}}',
- wrapper
- Specifies an element that acts as a wrapper.
- container
- Specifies an element within the wrapper which acts as a container.
- row
- Specifies an element within the container that acts as a row holder. The row is what is repeated.
- add
- Specifies an element within the wrapper which let's you add more more
- remove
- Specifies an element within the row which let's you remove the current row
- move
- Specifies an element within the row which let's you reposition the current row.
- move_up
- Specifies an element clicking on which moves the row up
- move_down
- Specifies an element clicking on which moves the row down
- move_steps
- Specifies a field using which steps can be provided for the move_up and move_down functionality. An element will move up or down this number of steps. Default value is 1 step. -1 moves the item all the way up or down.
- template
- Specifies an element within the container which acts as a row template.
- is_sortable
- Specifies whether rows can be sorted
- before_add
- Specifies a function to run before a row is added
- after_add
- Specifies a function to run after a row is added
- before_remove
- Specifies a function to run before a row is removed
- after_remove
- Specifies a function to run after a row is removed
- sortable_options
- Specifies an object that can contain Options, Methods and Events which are passed to jQuery UI Sortable
- row_count_placeholder
- Specifies the row count placeholder to be used