dynamically added row to inline formset not reflected in the post request in views.py in django

问题

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>

回答1:

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.

来源：https://stackoverflow.com/questions/33159752/dynamically-added-row-to-inline-formset-not-reflected-in-the-post-request-in-vie

标签

jquery

python

html

django

formsets