javascript - 具有动态表单添加的 Modelformset 仅保存第一个表单

Question

我在一页上有两个表单，每个表单都有自己的提交按钮。使用 JS 脚本，我可以为这两个表单中的每一个动态添加一个新的表单集。我面临的情况是，我可以为页面上首先显示的表单添加任意数量的新表单，并且所有表单都会保存。对于第二个表单列表，仅保存表单集列表中的第一个表单。

template.html

<form method="post" action="">{% csrf_token %}
{{ formset_planguage.management_form }}
    <div id="form_set_lang">
{% for form in formset_planguage.forms %}
{{form.non_field_errors}}
        {{form.errors}}
        <table class='no_error'>
            {{ form }}
        </table>
    {% endfor %}
</div>
<input type="button" value="Add More" id="add_more_lang">
<div id="empty_form_lang" style="display:none">
    <table class='no_error'>
        {{ formset_planguage.empty_form }}
    </table>
</div>
 <input class='btn btn-primary' type="submit" name="language" value="Submit"/>
</form>


<form method="post" action="">{% csrf_token %}
{{ formset_framework.management_form }}
    <div id="form_set_framework">
{% for form in formset_framework.forms %}
{{form.non_field_errors}}
        {{form.errors}}
        <table class='no_error'>
            {{ form }}
        </table>
    {% endfor %}
</div>
<input type="button" value="Add More" id="add_more_framework">
<div id="empty_form_framework" style="display:none">
    <table class='no_error'>
        {{ formset_framework.empty_form }}
    </table>
</div>
 <input class='btn btn-primary' type="submit" name="framework" value="Submit"/>
</form>


<script> 
$('#add_more_framework').click(function() {
    var form_idx = $('#id_form-TOTAL_FORMS').val();
    $('#form_set_framework').append($('#empty_form_framework').html().replace(/__prefix__/g, form_idx));
    $('#id_form-TOTAL_FORMS').val(parseInt(form_idx) + 1);
});
</script>

<script>
$('#add_more_lang').click(function() {
    var form_idx = $('#id_form-TOTAL_FORMS').val();
    $('#form_set_lang').append($('#empty_form_lang').html().replace(/__prefix__/g, form_idx));
    $('#id_form-TOTAL_FORMS').val(parseInt(form_idx) + 1);
});
</script>

Answer 1

你的两个表格就像 <form method="post" action="">因此目标始终是同一页面，因此 Django 将以相同的方式处理这两种表单。如果在您的页面中您处理 POST第一个表单的值，第二个表单将像第一个表单一样进行处理。

最好的解决方案是发送一个“大”表单，其中第一个“组”和第二个“组”中的所有字段的名称都不同，并且仅读取第一个“组”，或者如果它为空，则读取第二个“组”组”。

另一个解决方案是将第二个表单发送到不同的网址。