Multi step form (no next button) with conditional logic

Question

I'm using a multi-step form from this question and answer on StackOverflow

To add to this form;

1.) how can it work with conditional logic, as in, if the user's input radio first question is to choose ppc or organic, if they select organic then only certain "hidden" divs with "organic" class show, and the PPC related divs don't. But the other neutral hidden divs will show later. I think the problem is they are all hidden already so the first script seems to override the second javascript that looks for "if this... else".

2.)A second problem with the multi-step form without buttons above is you cannot tab to a second or third input text field on the last page. It just blanks out.

    <script type='text/javascript'>
            $(document).ready(function(){
        $('#traffic').on('change', function() {
          if ( this.value == 'organic' )
          {
            $(".org").show();
        $(".ppc").hide();
          }
          else
          {
            $(".org").hide();
        $(".ppc").show();
          }
        });
    });         
    </script>  

<script type="text/javascript">
document.querySelector("form").onchange = function(e) {
  var currentFormPage = e.target.parentElement.parentElement;
  console.log(e.target.name + ": " + e.target.value);
  if(currentFormPage.nextElementSibling) {
    currentFormPage.classList.add("hidden");
    currentFormPage.nextElementSibling.classList.remove("hidden");
  }
}
</script>

<form>
  <h2>Free Google Ads Audit!</h2>
<div>
    <h4>Do you want Organic or PPC traffic right now?</h4>
    <label class="radio-choice" style="display: none"><input type="radio" name="traffic" id="traffic" value="" checked></label>
    <label class="radio-choice"><input type="radio" name="traffic" id="traffic" value="organic">Organic is the best</label>
    <label class="radio-choice"><input type="radio" name="traffic" id="traffic" value="ppc">PPC is better</label>
  </div>
  <div class="hidden ppc">
    <h4>What's your monthly ads budget?</h4>
    <label class="radio-choice" style="display: none"><input type="radio" name="whats_your_monthly_ads_budget" value="" checked></label>
    <label class="radio-choice"><input type="radio" name="whats_your_monthly_ads_budget" value="2000-10000">2,000 - 10,000</label>
    <label class="radio-choice"><input type="radio" name="whats_your_monthly_ads_budget" value="11000-50000">11,000 - 50,000</label>
    <label class="radio-choice"><input type="radio" name="whats_your_monthly_ads_budget" value="51000-100000">51,000 - 100,000</label>
    <label class="radio-choice"><input type="radio" name="whats_your_monthly_ads_budget" value="+100000">100,000+</label>
  </div>
<div class="hidden ppc">
    <h4>Have you ever had an Adwords account?</h4>
    <label class="radio-choice" style="display: none"><input type="radio" name="adwords" value="" checked></label>
    <label class="radio-choice"><input type="radio" name="food" id="adwords" value="2-3 years">Yes</label>
    <label class="radio-choice"><input type="radio" name="food" id="adwords" value="5 years">No</label>
  </div>
  <div class="hidden org">
    <h4>How much experience do you have?</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">2-3 years</label>
    <label class="radio-choice"><input type="radio" name="exp" id="experience" value="5 years">5 years</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>
  <div class="hidden">
    <h4>Success! You qualify for a Free Google Ads Audit, enter your email to confirm!</h4>
    <input type="text" placeholder="Full name">
    <input type="email" placeholder="Company Email">
    <input type="button" name="email" value="Download">
  </div>
</form>

@Reed that multistep part I already understand. Yours shows 2 or 3 divs at a time. I am looking for it to work along with the original with no buttons and advances ONLY 1 hidden div at a time ( https://stackoverflow.com/questions/61634557/how-to-make-multi-form-without-next-button and based on the user input radio. See the original stackoverflow link this is concerning. This would make it even better. I have come across forms like this out there. — user3439348, Jul 17 '22 at 23:26

Zesty · Answer 1 · 2022-07-17T23:00:38.727

This should work how you want it. Unfortunately, jquery invokes the first id as they're unique so if you want multiple elements to do the same functionality you'll have to make them all classes.

<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>
      <h2>Free Google Ads Audit!</h2>
      <div>
        <h4>Do you want Organic or PPC traffic right now?</h4>
        <label class="radio-choice" style="display: none">
          <input type="radio" name="traffic" id="traffic" value="" checked>
        </label>
        <label class="radio-choice">
          <input type="radio" name="traffic" class="traffic" value="organic">Organic is the best </label>
        <label class="radio-choice">
          <input type="radio" name="traffic" class="traffic" value="ppc">PPC is better </label>
      </div>
      <div class="hidden ppc">
        <h4>What's your monthly ads budget?</h4>
        <label class="radio-choice" style="display: none">
          <input type="radio" name="whats_your_monthly_ads_budget" value="" checked>
        </label>
        <label class="radio-choice">
          <input type="radio" name="whats_your_monthly_ads_budget" value="2000-10000">2,000 - 10,000 </label>
        <label class="radio-choice">
          <input type="radio" name="whats_your_monthly_ads_budget" value="11000-50000">11,000 - 50,000 </label>
        <label class="radio-choice">
          <input type="radio" name="whats_your_monthly_ads_budget" value="51000-100000">51,000 - 100,000 </label>
        <label class="radio-choice">
          <input type="radio" name="whats_your_monthly_ads_budget" value="+100000">100,000+ </label>
      </div>
      <div class="hidden ppc">
        <h4>Have you ever had an Adwords account?</h4>
        <label class="radio-choice" style="display: none">
          <input type="radio" name="adwords" value="" checked>
        </label>
        <label class="radio-choice">
          <input type="radio" name="food" id="adwords" value="2-3 years">Yes </label>
        <label class="radio-choice">
          <input type="radio" name="food" id="adwords" value="5 years">No </label>
      </div>
      <div class="hidden org">
        <h4>How much experience do you have?</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">2-3 years </label>
        <label class="radio-choice">
          <input type="radio" name="exp" id="experience" value="5 years">5 years </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>
      <div class="hidden">
        <h4>Success! You qualify for a Free Google Ads Audit, enter your email to confirm!</h4>
        <input type="text" placeholder="Full name">
        <input type="email" placeholder="Company Email">
        <input type="button" name="email" value="Download">
      </div>
    </form>
  </body>
</html>

Multi step form (no next button) with conditional logic

1 Answers1