动态添加行到内联表单集未反映在 django views.py 中的 post 请求中

Question

我正在尝试使用 post 中提到的步骤将动态表单添加到我的内联表单集中：Add a dynamic form to a django formset using javascript in a right way

我有内联表单集，我正在使用 crispy 表单呈现。

模板中的渲染代码：

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

空表单模板用于添加新行：

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

我有一小段 javascript 代码来处理单击按钮并更新 html 和管理表单：

$(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);

    });
});

当我单击按钮添加 profile_kvp 按钮时，我能够使用新值正确更新 DOM，它在浏览器中看起来很好。

当我提交表单集时出现问题，然后我在 views.py 的表单集中看不到动态添加的 forms/row，因此无法在服务器端查看动态添加的值。在服务器端，我将新行视为没有数据的空行。我看到总表格值已更新，但所有新表格都是空的。

如有任何帮助，我们将不胜感激。

更新：使用调试器我可以看到动态添加的表单中没有值字段：

    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>

Answer 1

将近 5 天后，我得到了解决方案。问题出在表单标签上。我的脆皮表单渲染发生在表单标签之外。我分析了整个 html 并解决了问题。所以基本上问题中发布的代码可以正常工作。我把答案留在这里，以免有人再犯这个错误。

动态添加行到内联表单集未反映在 django views.py 中的 post 请求中

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

jquery

python

html

django

formsets