Django + Javascript - проблема с генерацией динамических ModelForm

У меня есть этот код

{% extends 'base.html' %}

{% block content %}

<form method='POST'>

<script>
    function addMemberFnc() {
        document.getElementById("teamMemberDiv").innerHTML+={{ project_members_form }}
    }
</script>

    {{ project_form }}
    <p id="demo" onclick="addMemberFnc()">Add member.</p>
    <div style="border-style: dotted" id="teamMemberDiv">
{#        {{ project_members_form }}#}
    </div>
    <button type="submit" class="btn btn-primary my-5">Submit</button>
</form>

{% endblock %}

Я хотел бы добавить project_member_form на основе некоторого действия (сейчас неважно, какого именно).

Это не работает, потому что кажется, что JS не может увидеть переменную Python в <script> block.

Вот проблема, которую я получил: Source issue

РЕДАКТИРОВАТЬ:

У меня есть одиночная форма без каких-либо функций, работающая без каких-либо проблем. Вот мой метод рендеринга:

def project_generation(request):
    if request.method == 'POST':
        pass
    else:
        project_form = ProjectForm(prefix='Project')
        project_role_form = ProjectRoleForm(prefix='ProjectRole')
        project_members_form = ProjectMemberForm(prefix='ProjectMember')
        # logging.debug(project_form)
        # logging.debug(project_members_form)

        return render(request,
                      "project_xml_generation.html",
                      {
                          "project_form": project_form,
                          "project_members_form": project_members_form
                       },
                      )

Я только что нашел способ.

Я реализовал событие window.onload. Это событие просто считывает innerHTML моего div. Поэтому я могу просто поместить один экземпляр {{ project_members_form }} внутрь и загрузить его.

Затем, нажав на кнопку, я просто добавляю тот же контекст обратно. Это может иметь некоторые недостатки, такие как идентификаторы и т.д., над которыми мне придется поработать, но основная логика работает.

Вот решение: 

{% extends 'base.html' %}

{% block content %}

<form method='POST'>

<script type="text/javascript">
    var a;
    window.onload = function() {
        loadHtml();
    }

    function loadHtml(){
        a = document.getElementById("teamMemberDiv").innerHTML;
    }

    function addMemberFnc() {
        document.getElementById("teamMemberDiv").innerHTML+=a;
    }
</script>

    {{ project_form }}
    <p id="demo" onclick="addMemberFnc()">Add member.</p>
    <div style="border-style: dotted" id="teamMemberDiv">
        {{ project_members_form }}
    </div>
    <button type="submit" class="btn btn-primary my-5">Submit</button>
</form>

{% endblock %}

Вам следует использовать шаблонные литералы.

попробуйте что-нибудь вроде этого

<script>
function addMemberFnc() {
    document.getElementById("teamMemberDiv").innerHTML+=`{{ project_members_form }}`
}
Вернуться на верх