jQuery Django Dynamic Formset Plugin
Download the production version or the development version.
In your web page:
<form>
<fieldset class="formlist">
<input id="form-TOTAL_FORMS" type="hidden" value="1">
<input id="form-MAX_NUM_FORMS" type="hidden" value="3">
<div class="dynamic-form">
<input type="checkbox" class="remove-row" name="form-0-DELETE" />
<input type="checkbox" name="form-0-input" />
<!-- any other inputs... -->
</div>
</fieldset>
<div class="empty-form">
<div class="dynamic-form" data-empty-permitted="true">
<input type="checkbox" class="remove-row" name="form-__prefix__-DELETE" />
<input type="checkbox" name="form-__prefix__-input" />
<!-- any other inputs... -->
</div>
</div>
</form>
<script src="jquery.js"></script>
<script src="dist/django-superformset.min.js"></script>
<script>
jQuery(function($) {
$('.formlist').superformset();
});
</script>There are numerous options documented in the development version.
Available options, explictly set to their defaults:
$('.formlist').superformset({
prefix: 'form', // The form prefix for your django formset
containerSel: 'form', // Container selector (must contain rows and formTemplate)
rowSel: '.dynamic-form', // Selector used to match each form (row) in a formset
formTemplate: '.empty-form .dynamic-form',
// Selector for empty form (row) template to be cloned to
// ...generate new form instances
// ...This must be outside the element on which ``formset`` is
// ...called, but within the containerSel
deleteTrigger: '<a href="#" class="remove-row" title="remove">remove</a>',
// The HTML "remove" link added to the end of each form-row
// ...(if ``canDelete: true``)
deleteTriggerSel: '.remove-row',// Selector for HTML "remove" links
// ...Used to target existing delete-trigger, or to target
// ...``deleteTrigger``
addTrigger: '<a href="#" class="add-row" title="add">add</a>',
// The HTML "add" link added to the end of all forms if no
// ...``addTriggerSel``
addTriggerSel: null, // Selector for trigger to add a new row, if already in markup
// ...Used to target existing trigger; if provided,
// ...``addTrigger`` will be ignored
addedCallback: null, // Function called each time a new form row is added
removedCallback: null, // Function called each time a form row is deleted
deletedRowClass: 'deleted', // Added to deleted row if ``canDelete: false``
addAnimationSpeed: 'normal', // Speed (ms) to animate adding rows
// ...If false, new rows will appear without animation
removeAnimationSpeed: 'fast', // Speed (ms) to animate removing rows
// ...If false, new rows will disappear without animation
autoAdd: false, // If true, the "add" link will be removed, and a row will be
// ...automatically added when text is entered in the final
// ...textarea of the last row
alwaysShowExtra: false, // If true, an extra (empty) row will always be displayed
// ...(requires ``autoAdd: true``)
deleteOnlyActive: false, // If true, extra empty rows cannot be removed until they
// ...acquire focus (requires ``alwaysShowExtra: true``)
canDelete: false, // If false, rows cannot be deleted (removed from the DOM).
// ...``deleteTriggerSel`` will remove ``required`` attr from
// ...fields within a "deleted" row
// ...deleted rows should be hidden via CSS
deleteOnlyNew: false, // If true, only newly-added rows can be deleted
// ...(requires ``canDelete: true``)
insertAbove: false, // If true, ``insertAboveTrigger`` will be added to the end of
// ...each form-row
insertAboveTrigger: '<a href="#" class="insert-row" title="insert">insert</a>',
// The HTML "insert" link add to the end of each form-row
// ...(requires ``insertAbove: true``)
optionalIfEmpty: true, // If true, required fields in a row will be optional until
// ...changed from their initial values
optionalIfEmptySel: '[data-empty-permitted="true"]'
// Selector for rows to apply optionalIfEmpty logic
// ...(requires ``optionalIfEmpty: true``)
});- 1.0.4 - (06/13/2014) Bugfix: Allow adding row after deleting all rows with
canDelete: true - 1.0.3 - (04/16/2014) Make totalForms and maxForms selectors less restrictive
- 1.0.2 - (02/20/2014) Add deletedRowClass option
- 1.0.1 - (02/19/2014) Add bower.json
- 1.0.0 - (10/14/2013) Initial release