无下一步按钮的多步骤表单：条件逻辑与Tab键问题排查

一、修复条件逻辑被多步骤脚本覆盖的问题 #

核心修改思路 #

放弃默认的「切换到下一个兄弟元素」逻辑，改为根据用户选择的流量类型定向跳转至对应步骤；后续中性步骤保持正常顺序切换。同时修正HTML中的表单结构错误，确保单选框分组正确。

修正后的HTML代码

<form>
  <h2>Free Google Ads Audit!</h2>
  <!-- 步骤1：选择流量类型 -->
  <div data-step="1">
    <h4>Do you want Organic or PPC traffic right now?</h4>
    <label class="radio-choice" style="display: none">
      <input type="radio" name="traffic" value="" checked>
    </label>
    <label class="radio-choice">
      <input type="radio" name="traffic" value="organic">Organic is the best
    </label>
    <label class="radio-choice">
      <input type="radio" name="traffic" value="ppc">PPC is better
    </label>
  </div>

  <!-- PPC专属步骤1 -->
  <div class="hidden ppc" data-step="ppc-1">
    <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>

  <!-- PPC专属步骤2 -->
  <div class="hidden ppc" data-step="ppc-2">
    <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="adwords" value="yes">Yes
    </label>
    <label class="radio-choice">
      <input type="radio" name="adwords" value="no">No
    </label>
  </div>

  <!-- Organic专属步骤 -->
  <div class="hidden org" data-step="org-1">
    <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="experience" value="2-3 years">2-3 years
    </label>
    <label class="radio-choice">
      <input type="radio" name="experience" value="5 years">5 years
    </label>
  </div>

  <!-- 中性步骤：目标选择 -->
  <div class="hidden" data-step="common-1">
    <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" data-step="final">
    <h4>Success! You qualify for a Free Google Ads Audit, enter your email to confirm!</h4>
    <input type="text" name="full_name" placeholder="Full name" data-skip-step tabindex="1">
    <input type="email" name="company_email" placeholder="Company Email" data-skip-step tabindex="2">
    <input type="button" name="submit_audit" value="Download" tabindex="3">
  </div>
</form>

修正后的JavaScript代码

// 初始化：隐藏所有非初始步骤
document.addEventListener('DOMContentLoaded', function() {
  // 定义隐藏类样式（如果CSS中未定义）
  const style = document.createElement('style');
  style.textContent = '.hidden { display: none; }';
  document.head.appendChild(style);
});

// 表单切换逻辑
document.querySelector("form").addEventListener('change', function(e) {
  const target = e.target;
  // 忽略最后一步输入框的change事件
  if (target.type !== 'radio' && target.dataset.skipStep) return;

  const currentStep = target.closest('[data-step]');
  const currentStepId = currentStep.dataset.step;

  // 处理第一步：流量类型选择
  if (currentStepId === '1') {
    const trafficType = target.value;
    // 隐藏所有步骤，只显示对应类型的第一步
    document.querySelectorAll('[data-step]').forEach(step => step.classList.add('hidden'));
    currentStep.classList.add('hidden');
    
    if (trafficType === 'organic') {
      document.querySelector('[data-step="org-1"]').classList.remove('hidden');
    } else if (trafficType === 'ppc') {
      document.querySelector('[data-step="ppc-1"]').classList.remove('hidden');
    }
    return;
  }

  // 处理PPC步骤1：跳转到PPC步骤2
  if (currentStepId === 'ppc-1') {
    currentStep.classList.add('hidden');
    document.querySelector('[data-step="ppc-2"]').classList.remove('hidden');
    return;
  }

  // 处理PPC步骤2或Organic步骤：跳转到中性步骤
  if (currentStepId === 'ppc-2' || currentStepId === 'org-1') {
    currentStep.classList.add('hidden');
    document.querySelector('[data-step="common-1"]').classList.remove('hidden');
    return;
  }

  // 处理中性步骤：跳转到最终步骤
  if (currentStepId === 'common-1') {
    currentStep.classList.add('hidden');
    document.querySelector('[data-step="final"]').classList.remove('hidden');
    return;
  }
});

修改说明 #

1. HTML结构修正：

   • 移除重复的id属性（单选框靠name分组即可，无需重复id）
   • 修正错误的单选框name（如把food改为adwords，exp改为experience）
   • 给每个步骤div添加data-step属性，明确标识步骤类型
   • 给最后一步的输入框添加name、data-skip-step和tabindex属性，避免异常行为

2. JS逻辑重构：

   • 放弃原有的「下一个兄弟元素」逻辑，改为根据data-step定向跳转
   • 第一步选择后，直接显示对应流量类型的专属步骤
   • 按流程顺序处理各步骤的跳转，确保条件分支和中性步骤的衔接

二、修复最后一页Tab键切换问题 #

核心问题原因 #

原脚本给整个form绑定了change事件，最后一页的输入框在内容变化时会触发该事件，引发不必要的DOM操作；同时原输入框无name属性，可能导致浏览器异常行为。

解决措施 #

1. 给最后一步的输入框添加data-skip-step属性，让脚本忽略这些输入框的change事件
2. 给输入框添加tabindex属性，确保Tab切换顺序正常
3. 给输入框添加合法的name属性，避免浏览器识别异常

上述修正后的HTML和JS代码已包含这些处理，实现后Tab键切换时输入框内容不会清空，切换流程正常。

内容的提问来源于stack exchange，提问作者user3439348