Динамически добавляемая строка во встроенный набор форм, не отраженная в запросе на публикацию в views.py в django

Question

Я пытаюсь добавить динамические формы в мой встроенный набор форм, используя шаги, упомянутые в посте: Добавьте динамическую форму в набор форм django, используя javascript правильным способом.

У меня есть встроенные формы, которые я рендеринг с использованием хрустящих форм.

рендеринг кода в шаблоне:

            <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 и поэтому не могу просматривать динамически добавленные значения на стороне сервера. На стороне сервера я вижу новые строки как пустые строки без данных. Я вижу, что общее значение формы обновлено, но все новые формы пусты.

Любая помощь приветствуется.

Обновление: с помощью отладчика я увидел, что в динамически добавленных формах не было поля значения:

    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 и исправил проблему. Так что в основном код, размещенный в вопросе, будет работать нормально. Я держу здесь ответ, чтобы никто не повторил эту ошибку.