[Vuejs]-How to make a multipage form

by

0👍

✅

If I understood correctly (and you are also using Vue.js for frontend), I suggest using one of the 2 following approaches:

  1. Use Vuex – Create 1 big json object that will be filled after submitting every step and finally, send it via axios to your API

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

0👍

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.

0👍

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;
});

Leave a comment