Можно ли сформировать отправку отображения: нет значений в формах 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>, поэтому он не будет ничего делать при отправке формы. Вы должны либо добавить его в текущую форму, либо обернуть его в другой тег формы и обработать отправку отдельно. Некоторый тип ajax может пригодиться здесь, или, может быть, даже использовать частичные шаблоны в django и иметь частичные части как часть формы, тогда, если вы получите успешный ответ, вы можете показать следующую форму и обрабатывать ее почти как совершенно отдельную форму. Когда вы отправляете форму, вы также можете проверить вкладку сети в инструментах разработчика и щелкнуть только что отправленный запрос, затем перейти на вкладку параметров и посмотреть, какие параметры были отправлены в форме отправки и каковы их значения. Я знаю, что это не прямой ответ, но, надеюсь, это поможет вам отладить немного больше.

Answer 2

Вам необходимо включить все в начальный тег <form>. На данный момент у вас есть вторая часть вашей формы за пределами <form></form>, и поэтому ничего не происходит, когда вы отправляете.