Skip to main content

Extend Django formsets with JavaScript

Project description

A wrapper for a JavaScript formset helper.


Install via pip:

pip install django-formset-js

Then add it and its dependancy django-jquery-js to your INSTALLED_APPS:



### Include the JavaScript library

Both jQuery and this library must be included in your page. The simplest way to do this is to add the scripts as media dependencies on your form:

from djangoformsetjs.utils import formset_media_js

class MyForm(forms.Form):
    class Media(object):
        js = formset_media_js + (
            # Other form media here

MyFormSet = formset_factory(MyForm)

And then include the Media of the form in your template:

{{ }}

Alternatively, simply add the script tags:

<script src="{{ STATIC_URL }}js/jquery.js"></script>
<script src="{{ STATIC_URL }}js/jquery.formset.js"></script>

## Render the formset

So that the library can work with your formset, certain blocks of your formset need to be marked up with data-formset-... attributes:

{% load formset_tags %}

<div id="formset" data-formset-prefix="{{ formset.prefix }}">
    {{ formset.management_form }}

    <div data-formset-body>
        <!-- New forms will be inserted in here -->
        {% for form in formset %}
            <div data-formset-form>
                {{ form }}
                <a data-formset-delete-button>Delete form</a>
        {% endfor %}

    <!-- The empty form template. By wrapping this in a <script> tag, the
    __prefix__ placeholder can easily be replaced in both attributes and
    any scripts -->
    <script type="form-template" data-formset-empty-form>
        {% escapescript %}
            <div data-formset-form>
                {{ formset.empty_form }}
                <a data-formset-delete-button>Delete form</a>
        {% endescapescript %}

    <!-- This button will add a new form when clicked -->
    <input type="button" value="Add another" data-formset-add>

    <script>jQuery(function($) {


The data-formset- data attributes are:


The value of {{ formset.prefix }}. This is used to find the management form.


This indicates where all the child forms are. New forms are inserted in here.


The element that contains the empty form template. For best results, use a <script> tag.


A button that adds a new form.


A button that deletes that form.

The empty form template is wrapped in a <script> as plain text. This stops any JavaScript attached to widgets from running upon page load, and makes finding and replacing the __prefix__ placeholder easier. The contents of the <script> should be wrapped in a {% escapescript %} block to prevent any script tags inside from closing the wrapping script tag prematurely.

If the forms can be deleted, and contain a delete button, the forms will be hidden from view when deleted. The DELETE field should be hidden if the delete button is used. The delete button is identified by the data-formset-delete-button attribute:

{% for form in formset %}
    <div data-formset-form>
        {{ }}
        {{ form.age }}

        <div class="hidden">{{ form.DELETE }}</div>
        <a data-formset-delete-button>Delete form</a>
{% endfor %}


A minimal example project is provided in the example/ directory. Read example/README for more information

Project details

Download files

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

Source Distribution

django-formset-js-0.3.1.tar.gz (6.1 kB view hashes)

Uploaded source

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page