为什么我的提交按钮在从无效帖子重新加载表单时被重新定位在 Django 表单之外

Question

>我有一个模板，其中包括一个ModelForm，一个ModelFormSet和一个提交按钮，该按钮应该从Form和FormSet提交所有表单数据。问题是，当我提交数据时，如果数据无效，有时模板会重新加载，提交按钮会重新定位在表单容器之外 - 这甚至是如何发生的？- 尽管用户可以编辑表单中的数据使其有效，但他们无法再提交表单。此外，提交按钮不会浮动。我使用带有 id "add_def_report"的按钮将表单动态添加到incident_formset(我在incident_formset中添加"empty_form"并更改 id(。感谢您的任何帮助！

模板：

<form method="post" class="form-horizontal">
{% crispy incident_form %}
<input type="button" id="delete_field_data" class="btn btn-outline-danger" value="Delete Field Incident Data">
<div id="form_set_class">
  {{ incident_formset.management_form }}
  {% for form in incident_formset %}
    {{form.non_field_errors}}
    {{form.errors}}
    {% crispy form %}
  {% endfor %}
</div>
<p>Add a part deficiency report for each component which needs repair or replacement</p>
<input type="button" id="add_def_report" class="btn btn-outline-dark" value="Add Part Deficiency Report">
<div id="empty_form" style="display:none">
  <div id="incident___prefix__">
    <fieldset>
      <legend>Part Deficiency Report</legend>
      {{incident_formset.empty_form}}
      <br>
      <input type="button" id='delete_incident___prefix__' class="btn btn-outline-danger" value="Delete Part Deficiency Report" onclick="delete_def_report()">
    </fieldset>
  </div>
</div>
<input type="submit" class="btn btn-outline-primary custom-submit" value="Submit">
</form>

.CSS：

.center-text{
  display: block;
  text-align: center;
}
form{
  display: inline-block;
  margin-right: auto;
  margin-left: auto;
  text-align: left;
}
legend {
  float: left; /*allows for top margin */
  border-bottom: 1px solid black;
  margin-bottom: 20px;
  margin-top: 20px;
}
#form_set_class{
  width: auto;
  text-align: left;
}
#form_set_class *{
  display: block;
}
#add_def_report{
  text-align: left;
}

views.py：

def new_incident(request):
if request.method == 'POST':
    incident_form = IncidentForm(request.POST)
    deficiency_formset = DeficiencyFormSet(request.POST)
    if deficiency_formset.is_valid() and incident_form.is_valid():
        incident_form.save()
        forms = deficiency_formset.save()
        for form in forms:
            form.save()
        return redirect('quality_dept:home')
    else:
        dict = {'incident_form': incident_form, 'incident_formset': deficiency_formset}
        return render(request, 'incidents/new_incident.html', dict)
else:
    incident_form = IncidentForm()
    formset_data = { 'form-TOTAL_FORMS': '0',
                     'form-INITIAL_FORMS': '0',
                     'form-MAX_NUM_FORMS': '20'}
    def_formset = DeficiencyFormSet(formset_data)
    dict = {'incident_form': incident_form, 'incident_formset': def_formset}
    return render(request, 'incidents/new_incident.html', dict)

forms.py：

class IncidentForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(IncidentForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            Fieldset("General Information", 'incident_id', 'qc_rep', 'date_filed'),
            Fieldset("Contract Data", "job", "contract", "unit"),
            Fieldset("Description", "description", "resolved", "resolution"),
            Fieldset("Field Incident Data", "field_incident", "gov_poc",
        "location_of_unit", "shipping_address", id="field_incident_fieldset")
    )
        self.helper.form_id = "incident_form"
    class Meta:
        model = Incident
        fields = "__all__"
class PartDeficiencyForm(forms.ModelForm):
    class Meta:
        model = PartDeficiency
        fields = "__all__"
DeficiencyFormSet = modelformset_factory(model=PartDeficiency, form=PartDeficiencyForm, exclude=None, extra=0, max_num=20, can_delete=True)

Answer 1

好的，所以我找到了解决提交按钮令人困惑的行为的方法 - 我将所有内容都包含在div 的表单标签中。这显然有效，但从技术上讲不能回答我的问题，因为它没有解释为什么会发生。但是我会将其发布为答案，以将其与上面的故障排除评论分开。如果我找到原因的答案，我会在这里添加它。