Multi step form with options prompts different forms

Alam

Hi,
We are trying to design multi step form in vue.js or in Quasar with the following requirement.

1. Consumer user logs in
 -> 1.1. Consumer user opens post Ad multi step form
-> 1.2. Consumer user is able to select a desired category in Post Ad form and clicks Next button
-> 1.3. Next screen of the multi step form prompts new screen with 2 radio buttons
-> 1.4. So radio button options are : Personal Ad & Business Ad
-> 1.5. When Business Ad radio button is selected we are able to prompt correct form which is business account upgrade form
-> 1.6. When Personal Ad radio button is selected we need to see a form that is related to the category that is chosen in (1.2) but this is not prompting

I’m wondering how to achieve to prompt respective form for (1.6) above

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="text/javascript" src="https://unpkg.com/vue@2.0.4/dist/vue.js"></script>
<!--  quasar farme work UMD in a head part-->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/quasar@1.15.4/dist/quasar.min.css" rel="stylesheet" type="text/css">
  </head>
</head>
<body>
<!--here I have give "Id = 'q-vk_app'" to mount this with a vue.js -->
<div id="vk_app">
  <form>
<!--Here is a first step. So in this step we have category field where user enters a category and based on that category we are prompting the-->
<!--other templates-->
    <div v-if="step === 1">

      <h1>Step One</h1>
      <p>
        <legend for="name">Your Name:</legend>
        <input id="name" name="name" v-model="category">
      </p>

      <button @click.prevent="next()">Next</button>

    </div>
    <div v-if="step === 2">
<!--if user logged in as a business user then second step by default we are displaying this radio button template-->
      {% if user_type == 'business' %}
      <template>
        <input type="radio"></br>
        <button @click.prevent="prev()">Previous</button>
        <button @click.prevent="next()">Next</button>
      </template>
      {% else %}
<!--if user enters a category 'laptop' then on next step we are prompting this template -->
      <template v-if="category == 'laptop'">
        <h1>template laptop</h1>
        <button @click.prevent="prev()">Previous</button>
        9
        <button @click.prevent="next()">Next</button>
      </template>
<!--if user enters a category 'IT' then on next step we are prompting this template based on category-->
      <template v-if="category == 'IT'">
        <h1>template IT</h1>
        <button @click.prevent="prev()">Previous</button>
        <button @click.prevent="next()">Next</button>
      </template>

<!--if user enters a category 'computer' then on next step we are prompting this template based on category-->
      <template v-if="category == 'computer'">
        <h1>template computer</h1>
        <button @click.prevent="prev()">Previous</button>
        <button @click.prevent="next()">Next</button>
      </template>
      {% endif %}
    </div>
<!--here is a step 3 div after prompting the category specified fields we prompt this div-->
    <div v-if="step === 3">
      <h1>Step Three</h1>

      <button @click.prevent="prev()">Previous</button>
      <button @click.prevent="submit()">Save</button>

    </div>
  </form>

  <br/><br/>Debug: {{registration}}
</div>

<!--Adding a quasar script at the end of the body -->
  <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.15.4/dist/quasar.umd.min.js"></script>
</body>

<script>
  const app = new Vue({
  el:'#q-vk_app',
  data() {
  return {
  step:1,
  category:null,
  street:null,
  city:null,
  state:null,
  numtickets:0,
  shirtsize:'XL',

  }
  },
  methods:{
  prev() {
  this.step--;
  },
  next() {
  this.step++;
  },
  submit() {
  alert('Submit to blah and show blah and etc.');
  }
  }
  });

</script>

<script>
  // optional
  window.quasarConfig = {
    brand: { // this will NOT work on IE 11
      primary: '#e46262',
      // ... or all other brand colors
    },
    notify: {...}, // default set of options for Notify Quasar plugin
    loading: {...}, // default set of options for Loading Quasar plugin
    loadingBar: { ... }, // settings for LoadingBar Quasar plugin
    // ..and many more
  }

Thanks
Alam

dobbel

@alam

Look alan you have posted twice now about how to create some application feature with Quasar in UMD mode.

People here on this forum are very happy to help with Quasar questions and issues. I have pointed you in the right direction, but forum members are not going to create a 6 step wizard component for you. That’s not asking for help that is asking for someone else to do your job. If you want support please make an effort first or create a post it in the jobs section.

No More Posting New Topics!

Multi step form with options prompts different forms