Django создание модели с отношением с использованием динамических полей
Мне трудно придумать способ динамического добавления полей в форму с помощью jQuery. У меня есть модель Customer, которая имеет отношение MtO с моделью Contacts и моделью Reference. После заполнения информации о клиенте, для каждого контакта требуется 5 полей. Но сложность в том, что они могут добавить до 5 контактов, поэтому я использую Javascript для добавления html, чтобы получить больше наборов из 5 форм. Но как мне заставить эти поля работать с Django?
index.html:
<div class="row g-1" id="contactRow">
<div class="col-md-5">
<select class="form-select mb-2" aria-label="Contact types">
<option style="font-weight:bold" value="" selected disabled>Type</option>
{% for type in contact_types %}
<option>{{ type.name }}</option>
{% endfor %}
</select>
<div class="form-floating form-floating-group flex-grow-1 mb-2">
{{ form.contact_name }}
<label for={{ form.contact_name.id_for_label }}>
{{ form.contact_name.label }}
</label>
</div>
<div class="form-floating form-floating-group flex-grow-1 mb-2">
{{ form.contact_funct }}
<label for={{ form.contact_funct.id_for_label }}>
{{ form.contact_funct.label }}
</label>
</div>
<div class="form-floating form-floating-group flex-grow-1 mb-2">
{{ form.contact_email }}
<label for={{ form.contact_email.id_for_label }}>
{{ form.contact_email.label }}
</label>
</div>
<div class="form-floating form-floating-group flex-grow-1 mb-2">
{{ form.contact_phone }}
<label for={{ form.contact_phone.id_for_label }}>
{{ form.contact_phone.label }}
</label>
</div>
</div>
main.js:
$("#addContact").click(function () {
let html = '';
let row = $('#contactRow');
html += '<div class="col-md-5">';
//exactly the same as in index.html
html += '</div>';
row.append(html);
$(window).scrollTop($("#newRow").position().top);
});
$(document).on('click', '#removeContact', function () {
$(this).closest('#newContact').remove();
});
});