Django：使用 Jquery 的动态表单集仅保存第一个表单集实例

Posted 2023-02-23

技术标签:

【中文标题】Django：使用 Jquery 的动态表单集仅保存第一个表单集实例【英文标题】：Django: dynamic formset with Jquery only save first formset instance 【发布时间】：2017-04-05 04:18:52 【问题描述】：

所以我为示例设置了以下代码，然后是其外键的内联表单集，示例详细信息。我还向它添加了一些动态功能，以便您可以通过 Jquery 为表单集添加更多行。我从http://***.com/questions/501719/dynamically-adding-a-form-to-a-django-formset-with-ajax 得到了 Jquery 部分。我尝试了两种实现，但结果似乎相同。我想知道我是否在视图中做错了什么。

views.py

def project_detail (request, project_id):
     project = Project.objects.get(id = project_id)
     sample_form = SampleForm(request.POST or None, request.FILES or None, instance = project)
     SampleInlineFormSet = inlineformset_factory(Sample, SampleDetail, form=SampleDetailForm, extra=1, can_delete = False)
     formset = SampleInlineFormSet(request.POST or None, request.FILES or None, prefix="nested")
     if request.method == "POST":

        if 'sampleform' in request.POST:
            if sample_form.is_valid() and formset.is_valid():
                 sample_temp = sample_form.save()
                 sample = Sample.objects.get(pk = sample_temp.pk)
                 objects = formset.save(commit=False)
                 for object in objects:
                       object.sample = sample
                       object.save()

                 messages.success(request, "Sucessfully Created New Sample Log" )
                 return HttpResponseRedirect(reverse('projstatus:project_detail', args=(project_id,)))           
     context = 'project' : project, "sample_form":sample_form, 'formset' : formset
     return render(request, 'projstatus/detail.html', context)

forms.py

<form method='POST' action='' enctype='multipart/form-data'>% csrf_token %
             % crispy sample_form %

             <div id="form_set">
                  formset.management_form 
                 % for form in formset.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'>
                      formset.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>


              <button type='submit' class='save btn btn-default' name = 'sampleform'>Save</button>      

             </form>

但是，我有这个问题，只有第一个 formset 实例被保存。无论我动态放入多少。有人可以帮我吗？

编辑：

表单的外观

使用 Jquery 添加一个实例时的 POST 数据（总共 2 个实例）

不使用 Jquery 时的 POST 数据，设置 extra = 2。（总共 2 个实例）

【问题讨论】：

问题可能出在您的#add_more 点击处理程序中。比较使用和不使用 javascript 的 request.POST 的值（在视图中调整 extra 而不是单击“添加更多”），并确保您提交的数据完全相同。 @Alasdair 嗨，感谢 cmets。我更新了 POST 数据。似乎它可能是导致问题的 Jquery 案例中的“未定义”事物您的 jQuery 帖子数据丢失 nested-1-id、nested-1-location 等。 @Alasdair 谢谢！我仍然没有看到我犯了哪个部分....无论如何非常感谢您可能想从django.contrib.admin 如何处理在inlines.js 中动态添加内联表单集表单中汲取灵感。 【参考方案1】：

我认为您的问题在于您的 javascript。看来您是从另一个浮动的示例中获取了该 sn-p。

var form_idx = $('#id_form-TOTAL_FORMS').val();

为此，需要有一个具有id 的id_form-TOTAL_FORMS 的元素。

但我认为您的表单可能会有这样的输入，其 id 类似于 id_nested-TOTAL_FORMS 或类似的东西。因此，我认为您的 javascript 实际上并没有更新 Formset 的管理表单数据。

您应该检查页面上的 html 并查看此输入的 id 是什么。此外，使用 javascript 控制台查看您的 JS 代码实际在做什么。

【讨论】：

非常感谢！我尝试将 #id_form-TOTAL_FORMS 更改为 #id_nested-TOTAL_FORMS 并且它有效！【参考方案2】：

与上一个答案一样，每次添加行数时，nested-TOTAL_FORMS 字段值都需要更新。您当前正在更新不存在的字段 form-TOTAL_FORMS。

尝试将 js 从 #id_form-TOTAL_FORMS 更新为 #id_nested-TOTAL_FORMS

也可能有一种方法可以将字段 ID 作为模板变量获取，但目前我没有这样做。

【讨论】：

非常感谢！我尝试将 #id_form-TOTAL_FORMS 更改为 #id_nested-TOTAL_FORMS 并且它有效！