Question 88597 in Html Question posted in
Some basic documentation can be found here.

How to create a conditional multistep form? – Html

I want to create a multistep form for the html structure below.

Condition: IF radio "Yes" is checked, then show "Section2" when clicked next. IF radio "No" is checked, then show "Section3" when clicked next button.

      <form>
        <!-- Section 1 -->
        <div class="form-section current" id="section1">
          <h2>Do you like fruits?</h2>
          <label>
            <input type="radio" name="likeFruits" value="yes"> Yes
          </label>
          <label>
            <input type="radio" name="likeFruits" value="no"> No
          </label>
          <div class="form-button">
            <button type="button" onclick="nextSection()">Next</button>
          </div>
        </div>
        <!-- Section 2 -->
        <div class="form-section" id="section2">
          <h2>Which fruit do you like?</h2>
          <label>
            <input type="radio" name="favoriteFruit" value="apple"> Apple
          </label>
          <label>
            <input type="radio" name="favoriteFruit" value="grape"> Grape
          </label>
          <div class="form-button">
            <button type="button" onclick="prevSection()">Back</button>
            <button type="button" onclick="nextSection()">Next</button>
          </div>
        </div>
        <!-- Section 3 -->
        <div class="form-section" id="section3">
          <h2>Why don't you like fruit?</h2>
          <label>
            <input type="text" name="reason" placeholder="Enter reason">
          </label>
          <div class="form-button">
            <button type="button" onclick="prevSection()">Back</button>
            <button type="submit">Submit</button>
          </div>
        </div>

      </form>
Tags:

2

Answers


  1. 0

    Well you need to handle it with nextSection() function, you can add this:

    nextSection() {
    const getSelectedRadio = document.querySelector('input[name="likeFruits"]:checked');
    if(getSelectedRadio.value === 'yes') {

     document.getElementById("section2"). style.display = 'block';
    } else {
     document.getElementById("section3"). style.display = 'block';
    }
}

    And don’t forget to give them a default hidden value with css:

    #section2,#section3 { display: none; }
    Login or Signup to reply.
  2. 0

    Use the jquery on change function like this.

    <html>
  <head>
    <title>Test</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <style>
      .hidden {
        display: none;
      }
    </style>
    <script>
      $(document).ready(function() {
        $('.traffic').on('change', function() {
          if (this.value === "organic") {
            $(".org").show();
            $(".ppc").hide();
          } else {
            $(".org").hide();
            $(".ppc").show();
          }
        });
      });
    </script>
  </head>
  <body>
    <form>
      <div class="form-section current" id="section1">
        <h2>Do you like fruits?</h2>

        <label class="radio-choice">
          <input type="radio" name="traffic" class="traffic" value="organic">Yes </label>
        <label class="radio-choice">
          <input type="radio" name="traffic" class="traffic" value="ppc">No </label>
      </div>
      <div class="hidden ppc">
        <h4>Why don't you like fruit?</h4>
        <label>
          <input type="text" name="whats_your_monthly_ads_budget" placeholder="Enter reason">
        </label>
      </div>
      <div class="hidden org">
        <h4>Which fruit do you like?</h4>
        <label class="radio-choice" style="display: none">
          <input type="radio" name="experience" value="" checked>
        </label>
        <label class="radio-choice">
          <input type="radio" name="exp" id="experience" value="2-3 years">Apple </label>
        <label class="radio-choice">
          <input type="radio" name="exp" id="experience" value="5 years">Grape </label>
      </div>
      <div class="hidden">
        <h4>What are your Goal(s)?</h4>
        <label class="radio-choice" style="display: none">
          <input type="radio" name="what_are_your_goals" value="" checked>
        </label>
        <label class="radio-choice">
          <input type="radio" name="what_are_your_goals" value="Lead Generation">Lead Generation </label>
        <label class="radio-choice">
          <input type="radio" name="what_are_your_goals" value="Brand Awareness">Brand Awareness </label>
        <label class="radio-choice">
          <input type="radio" name="what_are_your_goals" value="Online Sales">Online Sales </label>
        <label class="radio-choice">
          <input type="radio" name="what_are_your_goals" value="Sign-ups">Sign-ups </label>
      </div>
    </form>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search