I'm trying to add dynamic forms to my inline formset using the steps mentioned in the post: Add a dynamic form to a django formset using javascript in a right way
I have inline formsets which i'm rendering using crispy forms.
rendering code in template:
<div>
{{ formset.management_form|crispy }}
</div>
<div id="items-form-container">
{% for form in formset.forms %}
<div id="item-{{ forloop.counter0 }}">
{% crispy form formset.crispy_helper %}
</div>
{% endfor %}
</div>
empty form template is used for adding new rows:
<script type="text/html" id="item-template">
<div id="item-__prefix__">
{% crispy formset.empty_form formset.crispy_helper %}
</div>
</script>
<a href="#" id="add-item-button" class="btn btn-info add-profile_kvp">Add profile_kvp</a>
I have a small javascript code to handle on click on the button and updating the html and management form:
$(document).ready(function() {
$('.add-profile_kvp').click(function(ev) {
ev.preventDefault();
var count = parseInt($('#id_profile_kvp-TOTAL_FORMS').val());
var tmplMarkup = $('#item-template').html();
var compiledTmpl = tmplMarkup.replace(/__prefix__/g, count);
$('div#items-form-container').append(compiledTmpl);
// update form count
$('#id_profile_kvp-TOTAL_FORMS').val(count+1);
});
});
When I click the button Add profile_kvp button i'm able to update the DOM properly with new values and it's looks fine in browser.
Problem appears when i submit the formset then I don't see the dynamically added forms/row in formset in views.py and so not able to view dynamically added values in server side. In server side i see new rows as empty rows without data. I see total forms value updated but all new forms are empty.
Any help would be much appreciated.
Update: Using debugger I could see that dynamically added forms didn't have the value field in them:
form1 = with proper value = forms one was there by default using extra = 1
<tr><th><label for="id_profile_kvp-0-key">Key:</label></th><td><input id="id_profile_kvp-0-key" maxlength="255" name="profile_kvp-0-key" type="text" value="1" /></td></tr>
<tr><th><label for="id_profile_kvp-0-value">Value:</label></th><td><input id="id_profile_kvp-0-value" maxlength="255" name="profile_kvp-0-value" type="text" value="1" /></td></tr>
<tr><th><label for="id_profile_kvp-0-DELETE">Delete:</label></th><td><input id="id_profile_kvp-0-DELETE" name="profile_kvp-0-DELETE" type="checkbox" /><input id="id_profile_kvp-0-id" name="profile_kvp-0-id" type="hidden" value="49" /><input id="id_profile_kvp-0-profile" name="profile_kvp-0-profile" type="hidden" value="54" /></td></tr>
form2 added dynamically
<tr><th><label for="id_profile_kvp-1-key">Key:</label></th><td><input id="id_profile_kvp-1-key" maxlength="255" name="profile_kvp-1-key" type="text" /></td></tr>
<tr><th><label for="id_profile_kvp-1-value">Value:</label></th><td><input id="id_profile_kvp-1-value" maxlength="255" name="profile_kvp-1-value" type="text" /></td></tr>
<tr><th><label for="id_profile_kvp-1-DELETE">Delete:</label></th><td><input id="id_profile_kvp-1-DELETE" name="profile_kvp-1-DELETE" type="checkbox" /><input id="id_profile_kvp-1-id" name="profile_kvp-1-id" type="hidden" /><input id="id_profile_kvp-1-profile" name="profile_kvp-1-profile" type="hidden" /></td></tr>
form3 added dynamically
<tr><th><label for="id_profile_kvp-2-key">Key:</label></th><td><input id="id_profile_kvp-2-key" maxlength="255" name="profile_kvp-2-key" type="text" /></td></tr>
<tr><th><label for="id_profile_kvp-2-value">Value:</label></th><td><input id="id_profile_kvp-2-value" maxlength="255" name="profile_kvp-2-value" type="text" /></td></tr>
<tr><th><label for="id_profile_kvp-2-DELETE">Delete:</label></th><td><input id="id_profile_kvp-2-DELETE" name="profile_kvp-2-DELETE" type="checkbox" /><input id="id_profile_kvp-2-id" name="profile_kvp-2-id" type="hidden" /><input id="id_profile_kvp-2-profile" name="profile_kvp-2-profile" type="hidden" /></td></tr>
After almost 5 days i got the solution. Issue was with the form tags. My crispy form rendering was happening outside the form tags. I analyzed the entire html and fixed the issue. So basically the code posted in the question will work fine. I keep the answer here so that no one does this error again.