DEV Community

Alam487
Alam487

Posted on

1

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

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

While many AI coding tools operate as simple command-response systems, Qodo Gen 1.0 represents the next generation: autonomous, multi-step problem-solving agents that work alongside you.

Read full post

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay