是否可以在 django 表单中形成提交显示:无值

Question

我正在尝试在 Django 中提交包含多个详细信息的表单提交，所以我决定分开使用下一步按钮，第一组详细信息将被隐藏，下一组将显示，表单提交将在最后一组详细信息中发生。我已经完成了代码并将标签放在开头，结束标签放在底部。但是表格没有提交。它没有显示任何错误。当我单击按钮时，没有任何反应

<form method="POST">{% csrf_token %}
            <div id="personal_info">
                <div class="container">
                      <div class="form-row">
                        <div class="form-group col-md-4">
                          <label for="firstname">First Name</label>
                          {{form.first_name}}
                        </div>
                        <div class="form-group col-md-4">
                          <label for="middlename">Middle Name</label>
                          {{form.middle_name}}
                        </div>
                        <div class="form-group col-md-4">
                          <label for="lastname">Last Name</label>
                          {{form.last_name}}
                        </div>
                      </div>
                      <div class="form-row">
                          <div class="form-group col-md-6">
                            <label for="emailadd">Email Address</label>
                            {{form.email_address}}
                          </div>
                          <div class="form-group col-md-5">
                            <label for="contact">Contact No</label>
                            {{form.contact_no}}
                          </div>
                          <div class="form-group col-md-1">
                            <label for="contact">Age</label>
                            <input type="number" class="form-control" id="contact">
                          </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-4">
                          <label for="position">Position</label>
                          {{ form.position_applied_for }}
                        </div>
                        <div class="form-group col-md-4">
                          <label for="gender">Gender</label>
                          {{ form.sex }}
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="birthplace">Place of birth</label>
                            {{ form.place_of_birth }}
                        </div>
                        <div class="form-group col-md-6">
                            <label for="birthdate">Date of birth</label>
                            {{ form.date_of_birth }}
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="city_address">City Address</label>
                            {{ form.city_add }}
                        </div>
                        <div class="form-group col-md-6">
                            <label for="city_zip">City Zip</label>
                            {{ form.city_zip }}
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-4">
                            <label for="citizenship">Citizenship</label>
                            {{ form.citizenship }}
                        </div>
                        <div class="form-group col-md-4">
                            <label for="religion">Religion</label>
                            {{ form.religion }}
                        </div>
                        <div class="form-group col-md-4">
                          <label for="source_type">Where did you find Halcyon?</label>
                          {{ form.source_type }}
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-4">
                            <label for="physical_deformities">Physical Deformities</label>
                            {{ form.physical_deformities }}
                        </div>
                        <div class="form-group col-md-4">
                            <label for="blood_type">Blood Type</label>
                            {{ form.blood_type }}
                        </div>
                        <div class="form-group col-md-4">
                            <label for="marital_status">Marrital Status</label>
                            {{ form.marital_status }}
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-3">
                            <label for="sss">SSS No.</label>
                            {{ form.sss }}
                        </div>
                        <div class="form-group col-md-3">
                            <label for="tin">TIN No.</label>
                            {{ form.tin }}
                        </div>
                        <div class="form-group col-md-3">
                            <label for="hdmf">HDMF No.</label>
                            {{ form.hdmf }}
                        </div>
                        <div class="form-group col-md-3">
                            <label for="phil">Phil health No.</label>
                            {{ form.phil }}
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-3">
                            <label for="person_emerg_name">Person to notify in case of emergency</label>
                            {{ form.person_emerg_name }}
                        </div>
                        <div class="form-group col-md-3">
                            <label for="person_emerg_add">Address of the person to notify in case of emergency</label>
                            {{ form.person_emerg_add }}
                        </div>
                        <div class="form-group col-md-3">
                            <label for="person_emerg_zip">Zip Code</label>
                            {{ form.person_emerg_zip }}
                        </div>
                        <div class="form-group col-md-3">
                            <label for="person_emerg_contact_no">Contact No.</label>
                            {{ form.person_emerg_contact_no }}
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-3">
                            <label for="tax_status">Tax Status</label>
                            {{ form.tax_status }}
                        </div>
                      </div>
                </div>
                <button id="next_family">Next</button>
                <input type="submit" value="submit">
                </form> 
            </div>
            <div id="family_info">
                <div class="container">
                      <div class="form-row">
                        <div class="form-group col-md-2">
                            <label for="firstname">Spouse Last Name</label>
                            {{form.spouse_last_name}}
                        </div>
                        <div class="form-group col-md-2">
                            <label for="middlename">Spouse First Name</label>
                            {{form.spouse_first_name}}
                        </div>
                        <div class="form-group col-md-2">
                            <label for="lastname">Spouse Middle Name</label>
                            {{form.spouse_middle_name}}
                        </div>
                        <div class="form-group col-md-2">
                            <label for="emailadd">Occupation</label>
                            {{form.spouse_occupation}}
                        </div>
                        <div class="form-group col-md-1">
                            <label for="contact">Age</label>
                            {{form.spouse_age}}
                        </div>
                        <div class="form-group col-md-2">
                            <label for="contact">Spouse Tel No:</label>
                            {{form.spouse_telno}}
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-2">
                            <label for="firstname">Father Last Name</label>
                            {{form.father_last_name}}
                        </div>
                        <div class="form-group col-md-2">
                            <label for="middlename">Father First Name</label>
                            {{form.father_first_name}}
                        </div>
                        <div class="form-group col-md-2">
                            <label for="lastname">Father Middle Name</label>
                            {{form.father_middle_name}}
                        </div>
                        <div class="form-group col-md-2">
                            <label for="emailadd">Occupation</label>
                            {{form.father_occupation}}
                        </div>
                        <div class="form-group col-md-1">
                            <label for="contact">Age</label>
                            {{form.father_age}}
                        </div>
                        <div class="form-group col-md-2">
                            <label for="contact">Father Tel No.</label>
                            {{form.father_telno}}
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-2">
                            <label for="firstname">Mother Last Name</label>
                            {{form.mother_last_name}}
                        </div>
                        <div class="form-group col-md-2">
                            <label for="middlename">Mother First Name</label>
                            {{form.mother_first_name}}
                        </div>
                        <div class="form-group col-md-2">
                            <label for="lastname">Mother Middle Name</label>
                            {{form.mother_middle_name}}
                        </div>
                        <div class="form-group col-md-2">
                            <label for="emailadd">Occupation</label>
                            {{form.mother_occupation}}
                        </div>
                        <div class="form-group col-md-1">
                            <label for="contact">Age</label>
                            {{form.mother_age}}
                        </div>
                        <div class="form-group col-md-2">
                            <label for="contact">Mother Tel No.</label>
                            {{form.mother_telno}}
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-2">
                            <label for="firstname">Sibling Last Name</label>
                            {{form.siblings_last_name}}
                        </div>
                        <div class="form-group col-md-2">
                            <label for="middlename">Sibling First Name</label>
                            {{form.siblings_first_name}}
                        </div>
                        <div class="form-group col-md-2">
                            <label for="lastname">Sibling Middle Name</label>
                            {{form.siblings_middle_name}}
                        </div>
                        <div class="form-group col-md-2">
                            <label for="emailadd">Occupation</label>
                            {{form.siblings_occupation}}
                        </div>
                        <div class="form-group col-md-1">
                            <label for="contact">Age</label>
                            {{form.siblings_age}}
                        </div>
                        <div class="form-group col-md-2">
                            <label for="contact">Sibling Tel No.</label>
                            {{form.siblings_telno}}
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-2">
                            <label for="firstname">Sibling Last Name</label>
                            {{form.siblings2_last_name}}
                        </div>
                        <div class="form-group col-md-2">
                            <label for="middlename">Sibling First Name</label>
                            {{form.siblings2_first_name}}
                        </div>
                        <div class="form-group col-md-2">
                            <label for="lastname">Sibling Middle Name</label>
                            {{form.siblings2_middle_name}}
                        </div>
                        <div class="form-group col-md-2">
                            <label for="emailadd">Occupation</label>
                            {{form.siblings2_occupation}}
                        </div>
                        <div class="form-group col-md-1">
                            <label for="contact">Age</label>
                            {{form.siblings2_age}}
                        </div>
                        <div class="form-group col-md-2">
                            <label for="contact">Sibling Tel No.</label>
                            {{form.siblings2_telno}}
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-2">
                            <label for="firstname">Sibling Last Name</label>
                            {{form.siblings3_last_name}}
                        </div>
                        <div class="form-group col-md-2">
                            <label for="middlename">Sibling First Name</label>
                            {{form.siblings3_first_name}}
                        </div>
                        <div class="form-group col-md-2">
                            <label for="lastname">Sibling Middle Name</label>
                            {{form.siblings3_middle_name}}
                        </div>
                        <div class="form-group col-md-2">
                            <label for="emailadd">Occupation</label>
                            {{form.siblings3_occupation}}
                        </div>
                        <div class="form-group col-md-1">
                            <label for="contact">Age</label>
                            {{form.siblings3_age}}
                        </div>
                        <div class="form-group col-md-2">
                            <label for="contact">Sibling Tel No.</label>
                            {{form.siblings3_telno}}
                        </div>
                      </div>      
                </div>
                <button id="previous_personal">Previous</button>
                <button id="next_educational">Next</button>
            </div>
                <input type="submit" value="submit">
            </div>

Answer 1

您需要

在初始<form>标记中包含所有内容。目前，您在<form></form>之外有表格的第二部分，因此提交时没有任何反应。

Answer 2

第二

组表单字段不在<form>中，因此它不会在表单提交时执行任何操作。您必须将其添加到当前表单中，或者将其包装在另一个表单标记中并单独处理提交的内容。某种类型的 ajax 可能会在这里派上用场，或者甚至可以在 django 中使用部分模板并将部分模板作为表单的一部分，然后如果您得到成功的响应，您可以显示下一个表单并将其几乎作为一个完全独立的表单来处理。提交表单时，您还可以检查开发工具中的网络选项卡，然后单击刚刚发送的请求，然后转到参数选项卡，查看表单提交中发送了哪些参数以及它们的值是什么。我知道这不是一个直接的答案，但希望它可以帮助您进行更多调试。