Html Form Posting Values to Django Backend only when submitted twice, or rather hit back to form and then submit again

So I have stumbled upon a case where my form does not post values after I click the submit button once, it goes to the next page indeed but my Django View can not fetch the post values.

But soon after I hit back button on browser and then clicks the submit button again it works ; I can then see the POSTed values in my DJango Views.

Here's my HTML form. (Please note I have removed the unnecessary code which is long)

  <form action="" method="POST" id="quizform">
{% csrf_token %}
<fieldset class="cfield" id="box1">
<p id="question" class="fs-title"> 1. {{data.0.question}}</p>
<div class="row">
<div class="{% if data.0.correct_answer2 == "" %}col-12{% else %}col-9{% endif %}">
<div class="form-check">
<label class="form-check-label"> <img id="a1-icon-{{data.0.pk}}" src="/static/assets/img/correct.png" class="answer_icon" width="20px" style="z-index: 99;" hidden>
<input id="a1{{data.pk}}" style="z-index: -1;" type="radio" class="radiobox form-check-input radio-box ans" name="q{{data.0.pk}}" qid="{{ data.0.pk }}" value="{{data.0.a1}}" required {% if data.0.correct_answer2  != "" %}disabled{% endif %}>
<span class="cspan" style="color: white;">TES</span>
</label>
<span id="a1" class="cspan">{% if data.0.a1_image.url != None %}<img  src="{{ data.0.a1_image.url }}" class="" width="100px">{% endif %} {{data.0.a1}} </span>
</div>
<div class="form-check">
<label class="form-check-label"><img id="a2-icon-{{data.0.pk}}" src="/static/assets/img/correct.png" class="answer_icon" width="20px" style="z-index: 99;" hidden>
<input id="a2{{data.pk}}" style="z-index: -1;"  type="radio" class="radiobox form-check-input radio-box ans" name="q{{data.0.pk}}" qid="{{ data.0.pk }}" value="{{data.0.a2}}" required {% if data.0.correct_answer2  != "" %}disabled{% endif %}>
<span class="cspan"  style="color: white;">TES</span>
</label>
<span id="a1" class="cspan">{% if data.0.a2_image.url != None %}<img  src="{{ data.0.a2_image.url }}" class="" width="100px">{% endif %} {{data.0.a2}} </span>
</div>
<div class="form-check">
<label class="form-check-label"><img id="a3-icon-{{data.0.pk}}" src="/static/assets/img/correct.png" class="answer_icon" width="20px" style="z-index: 99;" hidden>
<input id="a3{{data.pk}}" style="z-index: -1;"  type="radio" class="radiobox form-check-input radio-box ans" name="q{{data.0.pk}}" qid="{{ data.0.pk }}"  value="{{data.0.a3}}" required {% if data.0.correct_answer2  != "" %}disabled{% endif %}>
<span class="cspan"  style="color: white;">TES</span>
</label>
<span id="a1" class="cspan">{% if data.0.a3_image.url != None %}<img src="{{ data.0.a3_image.url }}" class="" width="100px">{% endif %} {{data.0.a3}} </span>
</div>
<div class="form-check">
<label class="form-check-label"><img id="a4-icon-{{data.0.pk}}" src="/static/assets/img/correct.png" class="answer_icon" width="20px" style="z-index: 99;" hidden>
<input id="a4{{data.pk}}" style="z-index: -1;"  type="radio" class="radiobox form-check-input radio-box ans" name="q{{data.0.pk}}" qid="{{ data.0.pk }}" value="{{data.0.a4}}" required {% if data.0.correct_answer2  != "" %}disabled{% endif %}>
<span class="cspan"  style="color: white;">TES</span>
</label>
<span id="a1" class="cspan">{% if data.0.a4_image.url != None %}<img src="{{ data.0.a4_image.url }}" class="" width="100px">{% endif %} {{data.0.a4}} </span>
</div>
{% if data.0.a5 != "" %}
<div class="form-check">
<label class="form-check-label"><img id="a5-icon-{{data.0.pk}}" src="/static/assets/img/correct.png" class="answer_icon" width="20px" style="z-index: 99;" hidden>
<input id="a5{{data.pk}}" style="z-index: -1;"  type="radio" class="radiobox form-check-input radio-box ans" name="q{{data.0.pk}}" qid="{{ data.0.pk }}" value="{{data.0.a5}}" required {% if data.0.correct_answer2  != "" %}disabled{% endif %}>
<span class="cspan"  style="color: white;">TES</span>
</label>
<span id="a5" class="cspan">{% if data.0.a5_image.url != None %}<img src="{{ data.0.a5_image.url }}" class="" width="100px">{% endif %} {{data.0.a5}} </span>
</div>
{% endif %}
</div>
{% if data.0.correct_answer2 != "" %}
<div class="col-3">
<br>
<div class="form-group">
<img id="c1-icon-{{data.0.pk}}" src="/static/assets/img/correct.png" class="select_icon" width="20px" style="z-index: 99;" hidden>
<select name="correct_answer1{{data.0.pk}}" id="correct_answer1{{data.0.pk}}" class="form-control">
<option>select</option>
<option value="{{data.0.a1}}" data-ans-no="a1">{{data.0.a1}}</option>
<option value="{{data.0.a2}}" data-ans-no="a2">{{data.0.a2}}</option>
<option value="{{data.0.a3}}" data-ans-no="a3">{{data.0.a3}}</option>
<option value="{{data.0.a4}}" data-ans-no="a4">{{data.0.a4}}</option>
{% if data.0.a5 != "" %}
<option value="{{data.0.a5}}"  data-ans-no="a4">{{data.0.a5}}</option>
{% endif %}
</select>
</div>
<div class="form-group">
<img id="c2-icon-{{data.0.pk}}" src="/static/assets/img/correct.png" class="select_icon" width="20px" style="z-index: 99;" hidden>
<select name="correct_answer2{{data.0.pk}}" id="correct_answer2{{data.0.pk}}" data-ans-no="asd" qid="{{ data.0.pk }}" class="form-control">
<option>select</option>
<option value="{{data.0.a1}}" data-ans-no="a1">{{data.0.a1}}</option>
<option value="{{data.0.a2}}" data-ans-no="a2">{{data.0.a2}}</option>
<option value="{{data.0.a3}}" data-ans-no="a3">{{data.0.a3}}</option>
<option value="{{data.0.a4}}" data-ans-no="a4">{{data.0.a4}}</option>
{% if data.a5 != "" %}
<option value="{{data.0.a5}}"  data-ans-no="a4">{{data.0.a5}}</option>
{% endif %}
</select>
</div>
<input class="btn btn-success multipleans" qid="{{ data.0.pk }}" type="button" value="submit">
</div>
{% endif %}
</div>
</fieldset>
<button type="button" title="answer this question to enable the button" name="next" class="mybtn" id="nextpage" disabled> Next <i class="fas fa-arrow-right"></i></button>
<button type="submit" name="" class="mybtn" id="submitbtn" > Submit</button>
</form>

Below is the Javascript :

<script>
var x={{datalength}};
$('#submitbtn').hide()
var y=1;
$('#nextpage').click(()=>{
$('#nextpage').prop('disabled',true);
$('#nextpage').prop('title',"answer this question to enable the button");
var next;
if(x !=y){
next=y+1;
$(`#box${y}`).hide()
$(`#box${next}`).show()
if(y<x){
++y;
}
}
if(y==x){
$('#nextpage').hide();
$('#submitbtn').show();
}
})
$('#previspage').click(()=>{
$('#submitbtn').hide();
$('#nextpage').show();
var pre=y-1;
// $('#nextpage').hide();
// alert(x)
if(pre<=0){
return false;
}
else{
$(`#box${pre}`).show()
$(`#box${y}`).hide()
if(y>pre){
--y;
}
}
})
</script>
<script>
// Answer submit handler
$('.ans').change(function (e) {
var $choice = $(this);
var qid = $choice.attr('qid');
var choice = $choice.val();
var next_btn = document.getElementById('nextpage');
$.ajax({
type: 'GET',
url: '/check-answer/' + qid + '/',
success: function (data) {
$('input[qid=' + qid + ']').each(function (index, obj) {
var image = document.getElementById("a"+(index+1)+"-icon-"+qid)
$(obj).prop('disabled', true);
if ($(obj).val() === data.correct && $(obj).val()) {
if($(obj).val() == choice){
image.src = '/static/assets/img/correctcolored.png';
}else{
image.src = '/static/assets/img/correct.png';
}
image.hidden = false;
} else {
if($(obj).val() == choice){
image.src = '/static/assets/img/wrongcolored.png';
}else{
image.src = '/static/assets/img/wrong.png';
}
image.hidden = false;
}
});
$('#nextpage').prop('disabled',false);
$('#nextpage').prop('title',"");
},
error: function (error) {
console.log(error);
},
});
});
$('.multipleans').click(function (e) {
var $submit = $(this);
var qid = $submit.attr('qid');
var $answer1 = document.getElementById("correct_answer1"+qid);
var $answer2 = document.getElementById("correct_answer2"+qid);
console.log($answer1.value)
$.ajax({
type: 'GET',
url: '/check-answer/' + qid + '/',
success: function (data) {
console.log(data.correct2)
var image1 = document.getElementById("c1-icon-"+qid)
var image2 = document.getElementById("c2-icon-"+qid)
if ($answer1.value === data.correct || $answer1.value === data.correct2){
image1.src = '/static/assets/img/correctcolored.png';
}else{
console.log("test")
image1.src = '/static/assets/img/wrongcolored.png';
}
image1.hidden = false;
if (($answer2.value === data.correct || $answer2.value === data.correct2) && $answer1.value != $answer2.value ){
image2.src = '/static/assets/img/correctcolored.png';
}else{
image2.src = '/static/assets/img/wrongcolored.png';
}
image2.hidden = false;
$('#nextpage').prop('disabled',false);
$('#nextpage').prop('title',"");
$('input[qid=' + qid + ']').each(function (index, obj) {
var image = document.getElementById("a"+(index+1)+"-icon-"+qid)
$(obj).prop('disabled', true);
if ($(obj).val() === data.correct || $(obj).val() === data.correct2) {
image.src = '/static/assets/img/correct.png';
image.hidden = false;
} else {
image.src = '/static/assets/img/wrong.png';
image.hidden = false;
}
});
},
error: function (error) {
console.log(error);
},
});
});
</script>

I don't think the view has any problem as it is fetching the value correctly only after second form submit.

I had a look at this post , which is quite relevant problem, but I don't think I have any conflicting event handlers.

So after a lot of debugging I thought of a solution which worked.

Firstly I created a copy of the form.

var userSubmissionForm = document.getElementById('quizform');

Then I added the form input elements to this copy.

  const hiddenField = document.createElement('input');
hiddenField.setAttribute('type', 'hidden');
hiddenField.setAttribute('name', "q"+qid);
hiddenField.setAttribute('value', choice);
userSubmissionForm.appendChild(hiddenField);

Lastly I submitted the newform upon clicking the submit button.

  userSubmissionForm.submit();

But I am still unsure why the first submit did not work.