Skip to main content

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.

PyPi version Npm version Documentation CI

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

Add and remove forms in an inline formset

Quickstart using Python

Install with:

pip install django-fancy-formset

Add 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.

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django-fancy-formset-0.2.2.tar.gz (10.0 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

django_fancy_formset-0.2.2-py3-none-any.whl (13.8 kB view details)

Uploaded Python 3

File details

Details for the file django-fancy-formset-0.2.2.tar.gz.

File metadata

  • Download URL: django-fancy-formset-0.2.2.tar.gz
  • Upload date:
  • Size: 10.0 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? Yes
  • Uploaded via: twine/4.0.2 CPython/3.11.4

File hashes

Hashes for django-fancy-formset-0.2.2.tar.gz
Algorithm Hash digest
SHA256 7cec148b4cf9217b4b85520c0bc56ad51178ce72e19246be9057625b06f16201
MD5 06bb767d95d472fa9048f2bdd61b3d6e
BLAKE2b-256 6ef9c63b32a3fb843d73e17fef5a3892b3e3082e927a86960d92272af5bc83db

See more details on using hashes here.

File details

Details for the file django_fancy_formset-0.2.2-py3-none-any.whl.

File metadata

File hashes

Hashes for django_fancy_formset-0.2.2-py3-none-any.whl
Algorithm Hash digest
SHA256 ad73cfcb597ce911ee62e35e767e17f349aeb26c821eefb6a323aec5b70563f0
MD5 e3c077cb631fbe694822a4cad493a8af
BLAKE2b-256 70529ff2a0021ec62a44f481a00666bde3027c80e7e245839fd4eaa09458077e

See more details on using hashes here.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Depot Continuous Integration Fastly CDN Google Download Analytics Sentry Error logging StatusPage Status page