Styjun

I am trying to form submit in Django with multiple details so I have decided to separate have the next button and the first set of details will be hidden and the next set will be displayed and the form submission will happen in the last set of details. I have finished the code and placed the tag on the beginning and the closing tag at the bottom. But the form was not submitting. It was not showing any error. When I click the button nothing happened

<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>

You need to include everything within the initial <form> tag. At the moment you have the second part of your form outside the <form></form> and so nothing is happening when you submit.

The second set of form fields is not in a <form> so it won't do anything on form submit. You either have to add it to the current form or wrap it in another form tag and handle that submit separately. Some type of ajax might come in handy here or maybe even using partial templates in django and having the partial be a part of the form then if you get a successful response you could show the next form and handle it almost as a completely separate form. When you submit the form you can also check the network tab in your dev tools and click on the request you just sent then go to the param tab and see what params were sent in the form submit and what their values are. I know this isn't a direct answer but hopefully it can help you debug a bit more.