DEV Community

Alam487
Alam487

Posted on

showing a category specified field after clicking radio button

here I have written a code for multistep form with radio button. So here in a first step I have a category field where user enters a category and based on that category we are prompting the next field. So here while user enters a category after that radio button form will display. if radio button is checked also we need to prompt a form whatever category entered in first step. Simply if user enters category then next step is radio button form if we checked the radio button then next form should display based on the entered category in first step

 <div id="app">
  <form>
  <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_type == 'business' %}
        <template>
            <input type="radio" @change="handleClickInput"></br>
            <button @click.prevent="prev()">Previous</button>
            <button @click.prevent="next()">Next</button>
        </template>
        {% else %}
          <template v-if="category == 'laptop'">
           <h1>template laptop</h1>
            <button @click.prevent="prev()">Previous</button>9
            <button @click.prevent="next()">Next</button>
          </template>

          <template v-else-if="category == 'IT'">
           <h1>template IT</h1>
            <button @click.prevent="prev()">Previous</button>
            <button @click.prevent="next()">Next</button>
          </template>

          <template v-else-if="category == 'computer'">
           <h1>template computer</h1>
            <button @click.prevent="prev()">Previous</button>
            <button @click.prevent="next()">Next</button>
          </template>
    {% endif %}
</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>
Enter fullscreen mode Exit fullscreen mode

vue.js

const app = new Vue({
  el:'#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.');      
    }
  }
});
Enter fullscreen mode Exit fullscreen mode

Top comments (0)