[ajax] Ajax를 사용하여 Django 폼셋에 폼을 동적으로 추가

이것이 jQuery를 사용하여 수행하는 방법입니다 .

내 템플릿 :

<h3>My Services</h3>
{{ serviceFormset.management_form }}
{% for form in serviceFormset.forms %}
    <div class='table'>
    <table class='no_error'>
        {{ form.as_table }}
    </table>
    </div>
{% endfor %}
<input type="button" value="Add More" id="add_more">
<script>
    $('#add_more').click(function() {
        cloneMore('div.table:last', 'service');
    });
</script>

자바 스크립트 파일에서 :

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

그것이하는 일 :

cloneMore받아들이는 selector첫 번째 인수로하고, type제 2 하나의 formset의. 무엇을 selector해야하는 것은 중복해야하는지 전달할 수 있습니다. 이 경우 div.table:lastjQuery가 클래스가있는 마지막 테이블을 찾도록 전달합니다 table. :last이 있기 때문에 그 부분은 중요하다 selector또한 새로운 형태 다음에 삽입 할 것을 결정하는 데 사용됩니다. 나머지 양식의 끝에 그것을 원할 것입니다. type우리는 업데이트 할 수 있도록 인수는 management_form특히 필드 TOTAL_FORMS뿐만 아니라 실제 양식 필드를. 당신은, 말하자면, 가득 해당 formset있는 경우 Client모델을 관리 필드의 ID를해야합니다 id_clients-TOTAL_FORMS및 id_clients-INITIAL_FORMS양식 필드의 형식이됩니다 반면, id_clients-N-fieldname과N로 시작하는 양식 번호입니다 0. 그래서 함께 type인수로 사용 cloneMore하는 방법을 여러 가지 형태의 기능 모습이 현재와 같은에서 모든 필드 이름 / ID를 대체하는 새로운 형태의 내부의 모든 입력 및 레이블을 통과 id_clients-(N)-name하는 id_clients-(N+1)-name등등. 완료된 후에는 TOTAL_FORMS필드를 업데이트하여 새 양식을 반영하고 세트 끝에 추가합니다.

이 기능은 설정 방식에 따라 양식 세트에서 더 많은 양식을 제공하려고 할 때 앱 전체에서 사용할 수 있으며 복제하기 위해 숨겨진 “템플릿”양식을 가질 필요가 없기 때문에 특히 유용합니다. 내가 그것을 전달하는 한 양식 이름과 양식이 배치되는 형식. 도움이 되길 바랍니다.

답변

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