Django 中动态添加多个表单字段

在 Django 中，我们想要创建一个会员表单，其中包括一个“教育经历”部分，该部分包含三个元素：

• 外键，指向“学术背景”模型（其中有高中、学士学位、硕士学位等选项）
• 字符串字段 - 学校名称
• 字符串字段 - 学习领域

我们可以在表单中添加一个“添加另一个”按钮，使用 JS 和 Jquery 来向用户显示新的教育经历。

解决方案

1. 模型设计

首先，我们需要在模型中定义“教育经历”部分：

class Education(models.Model):
    academic_background = models.ForeignKey(AcademicBackground, on_delete=models.CASCADE)
    school_name = models.CharField(max_length=255)
    field_of_studies = models.CharField(max_length=255)

2. 表单设计

在表单中，可以使用 ModelForm 来创建“教育经历”部分：

class EducationForm(ModelForm):
    class Meta:
        model = Education
        fields = ['academic_background', 'school_name', 'field_of_studies']

3. 视图函数

在视图函数中，我们使用 formset_factory 来创建一组“教育经历”表单：

EducationFormSet = formset_factory(EducationForm, extra=1)

def education_view(request):
    if request.method == 'POST':
        formset = EducationFormSet(request.POST)
        if formset.is_valid():
            # 保存表单集
            formset.save()
    else:
        formset = EducationFormSet()

    context = {'formset': formset}
    return render(request, 'education.html', context)

4. HTML 模板

最后，在 HTML 模板中，使用 {% for %} 循环来渲染“教育经历”表单集：

{% for form in formset %}
<div class="form-group">
    <label for="{{ form.academic_background.id_for_label }}">学术背景</label>
    {{ form.academic_background }}
</div>
<div class="form-group">
    <label for="{{ form.school_name.id_for_label }}">学校名称</label>
    {{ form.school_name }}
</div>
<div class="form-group">
    <label for="{{ form.field_of_studies.id_for_label }}">学习领域</label>
    {{ form.field_of_studies }}
</div>
{% endfor %}

5. 添加“添加另一个”按钮

在 HTML 模板中，可以使用 JavaScript 和 jQuery 来添加“添加另一个”按钮，并动态添加新的“教育经历”表单：

// 添加“添加另一个”按钮
$('#add-education').click(function() {
    var formset = $('#education-formset');
    var numForms = formset.children().length;
    formset.append(`
        <div class="form-group">
            <label for="id_education-${numForms}-academic_background">学术背景</label>
            <select name="education-${numForms}-academic_background" id="id_education-${numForms}-academic_background">
                <option value="1">高中</option>
                <option value="2">学士学位</option>
                <option value="3">硕士学位</option>
            </select>
        </div>
        <div class="form-group">
            <label for="id_education-${numForms}-school_name">学校名称</label>
            <input type="text" name="education-${numForms}-school_name" id="id_education-${numForms}-school_name" />
        </div>
        <div class="form-group">
            <label for="id_education-${numForms}-field_of_studies">学习领域</label>
            <input type="text" name="education-${numForms}-field_of_studies" id="id_education-${numForms}-field_of_studies" />
        </div>
    `);
});

这样，我们就可以在 Django 中动态添加多个“教育经历”表单了。