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.1.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.1-py3-none-any.whl (13.8 kB view details)

Uploaded Python 3

File details

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

File metadata

  • Download URL: django-fancy-formset-0.2.1.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.1.tar.gz
Algorithm Hash digest
SHA256 c0fd36f39ac549fe4e0284f4075c187b5d39a6eadf3ae8d16d95019fa0363586
MD5 5e870bc351c89d1f147b9d9f503b1a35
BLAKE2b-256 5521ff9fd4156145d50789c40c528e796829024e30ea74f492349bbec0aa7ae6

See more details on using hashes here.

File details

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

File metadata

File hashes

Hashes for django_fancy_formset-0.2.1-py3-none-any.whl
Algorithm Hash digest
SHA256 7a48c97580f4bfb4119cf26f17bf2ffe98e5aeb09ef5df276215d6b9df62c87b
MD5 5b7bdcac1f0df7ac27ce3483f9678614
BLAKE2b-256 3fa32c17303e80532045c44e6b282aba6d1b5a9043789de2992b0a3a975fa47b

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