django-fancy-formset
This is a plain JavaScript library to let users add and remove forms in a Django inline formset. It can be installed from PyPI as a Django app, from NPM as a JavaScript module, or linked to directly from your HTML.
Features:
- No dependencies, just 5kB of plain JavaScript
- Apply to formsets manually, or automatically via a
data-attribute - Optional Django app to simplify usage
- Raises events to allow for customisation
- Class based and designed to be extended
- Default styling available
Quickstart using Python
Install with:
pip install django-fancy-formsetAdd to your INSTALLED_APPS, then create your formsets using the provided
fancy formset classes:
from fancy_formset import FancyInlineFormSet
BookInlineFormSet = forms.inlineformset_factory(
Author, Book, formset=InlineFancyFormSet,
)then leave it to Django to render your formset:
{{ formset.media }}
<form method="post">
{% csrf_token %}
{{ form.as_p }}
{{ formset.as_p }}
<button type="submit">Save</button>
</form>See the Django installation documentation for more details
Quickstart using JavaScript
The Python package is a thin wrapper around the JavaScript package. For more control, you can integrate it yourself.
Add to your page directly using unpkg:
<html>
<head>
<!-- Optional styles -->
<link rel="stylesheet" href="https://unpkg.com/django-fancy-formset@^1/dist/formset.min.css">
</head>
<body>
<!-- Django formset goes here -->
<script src="https://unpkg.com/django-fancy-formset@^1"></script>
<script>formset.init();</script>
</body>
</html>You can also use it in your bundler or browser as module - see the JavaScript-only installation documentation for more details
Render your formset in your Django template. The template structure which will work with the default configuration is:
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<h2>Formset</h2>
<div data-formset="{{ formset.prefix }}"> {# Formset container to target #}
{{ formset.management_form }} {# Add the management form #}
<fieldset style="display: none"> {# Add and hide the empty form #}
{{ formset.empty_form.as_p }}
</fieldset>
{% for form in formset %}
<fieldset> {# Each formset form has a container #}
{{ form.as_p }} {# Actual form layout doesn't matter #}
</fieldset>
{% endfor %}
</div>
<button type="submit">Save</button>
</form>This can all be customised with options passed as formset.init(options) - see the
configuration documentation
for details.
Find out more
For full installation and usage instructions, as well as information on events, the API and customisation, see the documentation.