это мой код applyonline. html в основном после завершения части бенефициара должна отображаться часть мужа, но когда я нажимаю «Далее» после заполнения формы, она перенаправляет меня обратно к получателю и только когда я нажимаю Ctrl + рядом с ним Переходит к деталям мужа, но в новой вкладке. Также, если я не заполнил форму, если я нажимаю «Далее», я перехожу к следующей части, но если после заполнения формы я нажимаю «Далее», я возвращаюсь к бенефициару, и я также видел, что после при заполнении бенефициара и нажатии кнопки «Далее» данные сохраняются в базе данных, но я нажал не кнопку «Отправить», а просто следующую
<body ng-app="">
{% extends "pmmvyapp/base.html" %}
{% load crispy_forms_tags %}
{% load static %}
{% block content%}
<div class="col-md-8">
<form method="post" action="/personal_detail/" enctype="multipart/form-data">
<div class="group">
<div class="hide" id="q1">
{% csrf_token %}
<div class="form-group">
<div class=" mb-4">
<!--Beneficiary Details-->
<h6><u>(*Mandatory Fields)Please Fill up the details below </u></h6>
</div>
<legend class="border-bottom mb-4" ,align="center">1.Beneficiary Details</legend>
<label for="formGropuNameInput">Does Beneficiary have an Adhaar Card?*</label>
<input type="radio" name="showHideExample" ng-model="showHideTest" value="true">Yes
<input type="radio" name="showHideExample" ng-model="showHideTest" value="false">No
<!--logic for yes-->
<div ng-if="showHideTest=='true'">
<div class="form-group">
<label for="formGropuNameInput">Name of Beneficiary(as in Aadhar Card)*</label>
<input name="beneficiary_adhaar_name" class="form-control" id="formGroupNameInput" placeholder="Enter name of Beneficiary as in Aadhar Card" required>
</div>
<div class="form-group">
<label for="formGropuNameInput">Aadhaar Number(Enclose copy of Aadhaar Card)*:</label>
<input name="adhaarno" class="form-control" id="aadhar" pattern="[0-9]{4}[0-9]{4}[0-9]{4}" placeholder="Enter Aadhar Card number with proper spacing" required>
</div>
<input type="file" name="adhaarcopy" />
<div class="form-group">
<div class="form-check">
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
<label class="form-check-label" for="invalidCheck3">
Give consent to collect adhaar card data
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
</div>
<!-- <div class="form-group form-check">
<input name="checkbox" class="form-check-input" id="exampleCheck1" required>
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>-->
<!--logic for no-->
<div ng-if="showHideTest=='false'">
<div class="form-group">
<label for="formGroupDistrict">Please provide any of the following Identity Card*:</label>
<div class="form-group">
<label for="adhaar_eid">Aadhaar Enrollment ID(EID):</label>
<input name="adhaar_eid" id="identityno" class="form-control" required>
</div>
<div class="form-group">
<label for="formGropuNameInput">Name of Beneficiary(as in Identity Card)* </label>
<input name="beneficiary_id_name" class="form-control" id="formGroupNameInput" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label for="idno">Identity Number(Enclose Copy of Identity Card)*:</label>
<input name="idno" id="identityno" class="form-control" required>
</div>
<input type="file" name="idcopy" />
</div>
</div>
</div>
<!--Husband Details-->
<div class="hide" id="q2"> <div class="form-group">
<div class=" mb-4">
<h6><u>(*Mandatory Fields)Please Fill up the details below </u></h6>
</div>
<legend class="border-bottom mb-4" ,align="center">1.Husband Details</legend>
<label for="formGropuNameInput">Does Husband have an Adhaar Card?*</label>
<input type="radio" name="showHideExample" ng-model="showHideTest" value="1">Yes
<input type="radio" name="showHideExample" ng-model="showHideTest" value="2">No
<!--logic for yes-->
<div ng-if="showHideTest=='1'">
<div class="form-group">
<label for="formGropuNameInput">Name of Husband(as in Aadhar Card)*</label>
<input name="beneficiary_adhaar_name" class="form-control" id="formGroupNameInput" placeholder="Enter name of Beneficiary as in Aadhar Card" required>
</div>
<div class="form-group">
<label for="formGropuNameInput">Aadhaar Number(Enclose copy of Aadhaar Card)*:</label>
<input name="adhaarno" class="form-control" id="aadhar" pattern="[0-9]{4}[0-9]{4}[0-9]{4}" placeholder="Enter Aadhar Card number with proper spacing" required>
</div>
<input type="file" name="adhaarcopy" />
<div class="form-group">
<div class="form-check">
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
<label class="form-check-label" for="invalidCheck3">
Give consent to collect adhaar card data
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
</div>
<!-- <div class="form-group form-check">
<input name="checkbox" class="form-check-input" id="exampleCheck1" required>
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>-->
<!--logic for no-->
<div ng-if="showHideTest=='2'">
<div class="form-group">
<label for="formGroupDistrict">Please provide any of the following Identity Card*:</label>
<select name="idcard" id="formGroupDistrict" required>
<div class="form-group">
<label for="adhaar_eid">Aadhaar Enrollment ID(EID):</label>
<input name="adhaar_eid" id="identityno" class="form-control" required>
</div>
<div class="form-group">
<label for="formGropuNameInput">Name of Husband(as in Identity Card)* </label>
<input name="beneficiary_id_name" class="form-control" id="formGroupNameInput" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label for="idno">Identity Number(Enclose Copy of Identity Card)*:</label>
<input name="idno" id="identityno" class="form-control" required>
</div>
<input type="file" name="idcopy" />
</div>
</div>
</div>
<div class="hide" id="q3">three</div>
<div class="hide" id="q4">four</div>
</div>
<div style="margin-bottom:10px ">
<button id="next">Next</button> <button id="prev">Previous</button>
</div>
<button type="submit" class="btn btn-primary" style="margin-bottom:10px ">Submit</button>
</form>
</div>
<style>
.hide
{
display : none;
}
</style>
{% endblock %}
</body>
, это мой пользовательский код. js для многошаговой формы
$(document).ready(function(){
$(".hide").first().addClass("current").show();
$( "#next" ).click(function() {
var current = $(".current");
var next = $(current).next();
if($(next).length > 0)
{
$(next).addClass("current").show();
$(current).removeClass("current");
$(current).hide();
}
});
$( "#prev" ).click(function() {
var current = $(".current");
var previous = $(current).prev();
if($(previous).length > 0)
{
$(previous).addClass("current").show();
$(current).removeClass("current");
$(current).hide();
}
});
});