how to make a multipage form - php

Question

i'm making a website for online exams. i made 1 question per page and i made a custom pagination but now i dont know how to make when i move to the next question i save the answer of the previous question so i can submit all the answers to the databse
this is the view code
<form method="POST" action="{{route("answer.store")}}">
#csrf
<div class="content" v-for="question in questions">
<div v-if="post.qtype === 'choose'">
<div class="font-weight-bold p-4"> #{{question.qname}}</div>
<div v-for="choice in question.choices">
<div class="p-4">
<input type="radio" class="form-check-input" style="display: block" id="radio" :name="'answers[q' + post.id + '][]'" :value="choice">
<label class="form-check-label" for="radio">#{{choice}}</label>
</div>
</div>
</div>
</div>
{{ Form::hidden('exam_id', Crypt::encrypt($exam->id)) }}
<input class='btn btn-primary' v-if="pagination.current_page == pagination.last_page" id='submit-btn' type="submit">
</form>
expected result : all the answers get submited
actual result : only last answer get submited
**Note: im using default laravel pagination but i use json scripts and axios to move throw pagination without refreshing page **

Answer 1

If I understood correctly (and you are also using Vue.js for frontend), I suggest using one of the 2 following approaches:
Use Vuex - Create 1 big json object that will be filled after submitting every step and finally, send it via axios to your API
Have 1 parent component to hold the big object in its data and child component which will represent current step of the multi-step form. Each child step should validate its inputs and then emit the data to parent component. After coming to the last step, just send the request from the parent.
Bonus: I strongly recommend taking a look at https://v2.vuejs.org/v2/guide/components-dynamic-async.html for child components with keep alive tag in case you want to be able to get to previous step as well.
General architecture for the second approach (I didn't test it but you should get the big picture):
// Parent.vue
<template>
<div>
<keep-alive>
<component v-bind:is="actualStep" #stepSubmitted="handleStepSubmitted"></component>
</keep-alive>
</div>
</template>
<script>
export default {
components: {
Step1: () => import("./Step1"),
Step2: () => import("./Step2")
},
data() {
return {
resultToSend: [],
formSteps: ["Step1", "Step2"],
actualStep: "Step1"
};
},
methods: {
handleStepSubmitted(dataFromStep) {
resultToSend.push(dataFromStep);
if (formSteps.indexOf(actualStep) === formSteps.length - 1) {
this.submitData();
} else {
this.actualStep = this.nextStep();
}
},
nextStep() {
return this.formSteps[this.formSteps.indexOf(actualStep) + 1];
},
submitData() {
// send your post request
}
}
};
</script>
// Step1.vue
<template>
<div>
<input v-model="data1" type="text" />
<button #click="submitstep">Next</button>
</div>
</template>
<script>
export default {
data() {
return {
data1: ""
};
},
methods: {
submitStep() {
this.$emit("stepSubmitted", data1);
}
}
};
</script>
// Step2.vue
<template>
<div>
<input v-model="data2" type="text" />
<button #click="submitstep">Next</button>
</div>
</template>
<script>
export default {
data() {
return {
data2: ""
};
},
methods: {
submitStep() {
this.$emit("stepSubmitted", data2);
}
}
};
</script>

Answer 2

You have to create an array with a key-value pair then write a method that pushes the ids and answers into the array on every page change(If a user wants to turn back and change the question then you need to implement CRUD actions for this array). If the user achieved the last page then post your array into your database with axios.

Answer 3

Use JavaScript to submit the form when the next button is clicked:
var nextBtn = document.getElementById("nextBtn");
nextBtn.addEventListener("click", function(e){
e.preventDefault();
let form = document.getElementById("form");
form.submit();
return true;
});