Repeatable Fields

Plugin's Homepage with Demo

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: null,
sortable_options: null,
row_count_placeholder: '{{row-count-placeholder}}',