Django formset.empty_forms adding forms dynamically

Question

I'm using django-dynamic-formset to dynamically add forms to a formset.
This works fine, as long as I have extra=1 while creating the formset.
What I would love to do though, is have no form shown until the user clicks an "add form" button.
The recommended solution to this is using empty_forms, but for some reason that doesn't work (Not working meaning that no record is saved to the DB). Following the working code, without using empty_form:

<div id="coding">
<div id="coding-inner">
    <form action="" method="post" accept-charset="utf-8" id="form"> 
        {% csrf_token %}
        {{ formset.management_form }}
        {% for form in formset %}
        <div class="form-container">
            <table border="0" cellspacing="5" cellpadding="5">
                <tr>
                    <td><label for="id_form-0-event_date">Event Date:</label></td>
                    <td>{{ form.event_date}}</td>
                </tr>
                <tr>
                    <td><label for="id_form-0-location">Location:</label></td>
                    <td><div class="location_wrapper">{{ form.location }}</div></td>
                </tr>
                <tr>
                    <td><label for="id_form-0-actors">Actors:</label></td>
                    <td>{{ form.actors }}</td>
                </tr>
                <tr>
                    <td><label for="id_form-0-num_participants">Number of Participants:</label></td>
                    <td>{{ form.num_participants }}</td>
                </tr>
                <tr>
                    <td><label for="id_form-0-issue">Issue:</label></td>
                    <td>{{ form.issue }}</td>
                </tr>
                <tr>
                    <td><label for="id_form-0-side">Side:</label></td>
                    <td>{{ form.side }}</td>
                </tr>
                <tr>
                    <td><label for="id_form-0-scope">Scope:</label></td>
                    <td>{{ form.scope }}</td>
                </tr>
                <tr>
                    <td><label for="id_form-0-part_violence">Participant Violence:</label></td>
                    <td>{{ form.part_violence}}</td>
                </tr>
                <tr>
                    <td><label for="id_form-0-sec_engagement">Security Forces Engagment:</label></td>
                    <td>{{ form.sec_engagement }}</td>
                </tr>
            </table>
        </div>
        {% endfor %}
        <div id="form-nav">
            <div id="save-stay">
                <input type="submit" name="coding_form_save" value="Save">
            </div>
            <div id="save-next">
                <input type="submit" name="coding_form_next" value="Save &#38; Next">
            </div>

        </div>
    </form>

</div>

<div id="pagination">
    <span class="step-links">
        {% if articles.has_previous %}
        <a href="?page={{ articles.previous_page_number }}">previous</a>
        {% endif %}

        <span class="current">
            Article {{ articles.number }} of {{ articles.paginator.num_pages }}.
        </span>
        {% if articles.has_next %}
        <a href="?page={{ articles.next_page_number }}">next</a>
        {% endif %}
    </span>
</div>


</div>

</div>

<script type="text/javascript">


           $(function() {
               $('.form-container').formset({
                   prefix: '{{ formset.prefix }}',
                   addText: 'add Event',
                   deleteText: 'delete Event'
               });
           })
</script>

And now the code using empty_form, which is not working. The only other difference is, that for the code using empty_form, extra is set to 0 instead of 1.

<div id="coding">
<div id="coding-inner">
    {% with formset.empty_form as form %}
    <div id="form-container" style="display:none;">
        <table border="0" cellspacing="5" cellpadding="5">
            <tr>
                <td><label for="id_form-0-event_date">Event Date:</label></td>
                <td>{{ form.event_date}}</td>
            </tr>
            <tr>
                <td><label for="id_form-0-location">Location:</label></td>
                <td><div class="location_wrapper">{{ form.location }}</div></td>
            </tr>
            <tr>
                <td><label for="id_form-0-actors">Actors:</label></td>
                <td>{{ form.actors }}</td>
            </tr>
            <tr>
                <td><label for="id_form-0-num_participants">Number of Participants:</label></td>
                <td>{{ form.num_participants }}</td>
            </tr>
            <tr>
                <td><label for="id_form-0-issue">Issue:</label></td>
                <td>{{ form.issue }}</td>
            </tr>
            <tr>
                <td><label for="id_form-0-side">Side:</label></td>
                <td>{{ form.side }}</td>
            </tr>
            <tr>
                <td><label for="id_form-0-scope">Scope:</label></td>
                <td>{{ form.scope }}</td>
            </tr>
            <tr>
                <td><label for="id_form-0-part_violence">Participant Violence:</label></td>
                <td>{{ form.part_violence}}</td>
            </tr>
            <tr>
                <td><label for="id_form-0-sec_engagement">Security Forces Engagment:</label></td>
                <td>{{ form.sec_engagement }}</td>
            </tr>
        </table>
    </div>
    {% endwith %}
    <form action="" method="post" accept-charset="utf-8" id="form"> 
        {% csrf_token %}

        <div id="forms">

        </div>
        {{ formset.management_form }}
        <div id="form-nav">
            <div id="save-stay">
                <input type="submit" name="coding_form_save" value="Save">
            </div>
            <div id="save-next">
                <input type="submit" name="coding_form_next" value="Save &#38; Next">
            </div>
        </div>

    </form>

</div>

<div id="pagination">
    <span class="step-links">
        {% if articles.has_previous %}
        <a href="?page={{ articles.previous_page_number }}">previous</a>
        {% endif %}

        <span class="current">
            Article {{ articles.number }} of {{ articles.paginator.num_pages }}.
        </span>
        {% if articles.has_next %}
        <a href="?page={{ articles.next_page_number }}">next</a>
        {% endif %}
    </span>
</div>
</div>

<script type="text/javascript">
           $(function() {
               $('#forms').formset({
                   formTemplate: '#form-container',
                   prefix: '{{ formset.prefix }}',
                   addText: 'add Event',
                   deleteText: 'delete Event'
               });
           })

</script>

What am I missing?

Answer 1

You could use this jquery plugin.