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 & 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 & 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?
