إضافة نموذج ديناميكيًا إلىformset في جانغو Django

يمكنك أن تقوم بهذا الأمر بطريقة سهلة من خلال jQuery ، كالتالي:

{{ serviceFormset.creating_form }}
<div class="form_set">
    {% for f in serviceFormset.forms %}
        <table class='no_error form'>
            {{ f.as_table }}
        </table>
    {% endfor %}
</div>
<input type="button" value="Add New Form" id="add">
<script>
    $('#add').click(function() {
        addMoreForms('table.form:last', 'service');
    });
</script>

الكود السابق (في القالب template) يقوم بعرض نموذج جديد عند الضغط على زر Add New Form.

ودالة addMoreForms، ستكون كالتالي:

function addMoreForms(selector, type) {
    let newForm = $(selector).clone(true);
    let totalValue = $('#id_' + type + '-total_forms').val();
  
    newForm.find(':input').each(function() {
        let name = $(this).attr('name').replace('-' + (totalValue-1) + '-', '-' + totalValue + '-');
        let id_ = 'id_' + name;
        $(this).attr({'name': name, 'id': id_}).val('').removeAttr('checked');
    });
  
    newForm.find('label').each(function() {
        let newFor = $(this).attr('for').replace('-' + (totalValue - 1) + '-', '-' + totalValue + '-');
        $(this).attr('for', newFor);
    });
  
    total++;
    $('#id_' + type + '-total_forms').val(totalValue);
    $(selector).after(newForm);
}

هذه الدالة مفيدة بشكل كبير لأن طريقة إعدادها تسمح لك باستخدامها في جميع أنحاء التطبيق عندما ترغب في عرض المزيد من النماذج في formset.

إليك نسخة مبسطة من إجابة سامح باستخدام نموذج فارغ كقالب:

<h3>My Services</h3>
{{ serviceFormset.management_form }}
<div id="form_set">
    {% for form in serviceFormset.forms %}
        <table class='no_error'>
            {{ form.as_table }}
        </table>
    {% endfor %}
</div>
<input type="button" value="Add More" id="add_more">
<div id="empty_form" style="display:none">
    <table class='no_error'>
        {{ serviceFormset.empty_form.as_table }}
    </table>
</div>
<script>
    $('#add_more').click(function() {
        var form_idx = $('#id_form-TOTAL_FORMS').val();
        $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
        $('#id_form-TOTAL_FORMS').val(parseInt(form_idx) + 1);
    });
</script>