从无效帖子重新加载表单后,为什么我的提交按钮重新放置在Django表单之外?

时间:2019-06-18 15:41:16

标签: django django-forms form-submit submit-button

我有一个模板,其中包括一个ModelForm,一个ModelFormSet和一个Submit按钮,该按钮应该提交来自Form和FormSet的所有表单数据。问题是,当我提交数据时,如果数据无效,有时模板将重新加载,并且提交按钮位于表单容器之外,怎么办? -尽管用户可以编辑表单中的数据以使其有效,但他们不再能够提交表单。此外,提交按钮也不会浮动。我使用ID为“ add_def_report”的按钮将表单动态添加到event_formset中(我向event_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)

1 个答案:

答案 0 :(得分:0)

好的,所以我找到了解决提交按钮混乱行为的方法-我将所有内容都封装在div的form标签内。这显然有效,但是从技术上讲不能回答我的问题,因为它不能解释为什么会发生。但是,我将其发布为答案,以将其与上面的故障排除注释分开。如果找到原因的答案,请在此处添加。