分步表单信息传递至确认页：当前实现是否最优？

你的当前方案可以实现需求，但并非最高效的实现方式，主要存在以下几个问题：

• 每次点击next按钮时都会重复查询所有输入元素，无论当前处于哪个步骤，存在大量不必要的DOM操作
• 硬编码了所有输入和输出元素的ID，后续添加或修改字段时需要手动修改多处代码，维护成本高
• 用户返回前面步骤修改内容后，确认页的信息不会自动同步，必须再次点击next才能更新

更高效的优化方案 #

核心思路是集中管理表单数据 + 按需渲染确认页，具体实现如下：

优化后的JavaScript代码

const previousButton = document.getElementById("previous")
const nextButton = document.getElementById("next")
const submitButton = document.getElementById('validate')
const form = document.getElementById('stepByStepForm')
const dots = document.getElementsByClassName('progress-bar__dot')
const numberOfSteps = 5
let currentStep = 1

// 集中存储表单数据
const formData = {}

// 监听所有输入元素的变化，实时同步数据
document.querySelectorAll('.step input').forEach(input => {
  // 初始化数据
  formData[input.name] = input.value
  // 实时更新数据
  input.addEventListener('input', () => {
    formData[input.name] = input.value
    // 如果当前在确认页，实时更新显示
    if (currentStep === numberOfSteps) {
      renderConfirmationPage()
    }
  })
})

// 进度点点击事件
for(let i = 0 ; i < dots.length ; ++i){
   dots[i].addEventListener('click', ()=>{
     goToStep(i+1) 
   })
}

previousButton.onclick = goPrevious
nextButton.onclick = goNext

function goNext(e) {
   e.preventDefault()
   currentStep += 1
   goToStep(currentStep)
}

function goPrevious(e) {
   e.preventDefault()
   currentStep -= 1
   goToStep(currentStep)
}

function goToStep(stepNumber){   
   currentStep = stepNumber
   
   let inputsToHide = document.getElementsByClassName('step')
   let inputs = document.getElementsByClassName(`step${currentStep}`)
   let indicators = document.getElementsByClassName('progress-bar__dot')
   
   for(let i = indicators.length-1; i >= currentStep ; --i){
      indicators[i].classList.remove('full')
   }
   
   for(let i = 0; i < currentStep; ++i){
      indicators[i].classList.add('full')
   }
   
   // 隐藏所有步骤
   for (let i = 0; i < inputsToHide.length; ++i) {
      hide(inputsToHide[i])
   }
   
   // 显示当前步骤
   for (let i = 0; i < inputs.length; ++i) {
      show(inputs[i])
   }
   
   // 按钮状态控制
   if(currentStep === numberOfSteps){
      enable(previousButton)
      disable(nextButton)
      show(submitButton)
      // 进入确认页时渲染数据
      renderConfirmationPage()
   } else if(currentStep === 1){
     disable(previousButton)
      enable(nextButton)
      hide(submitButton)
   } else {
      enable(previousButton)
      enable(nextButton)
      hide(submitButton)
   }
}

// 渲染确认页数据
function renderConfirmationPage() {
  // 遍历数据，自动匹配输出元素（约定输出ID为${name}Output）
  Object.entries(formData).forEach(([name, value]) => {
    const outputElement = document.getElementById(`${name}Output`)
    if (outputElement) {
      outputElement.textContent = value
    }
  })
}

function enable(elem) {
   elem.classList.remove("disabled");
   elem.disabled = false;
}

function disable(elem) {
   elem.classList.add("disabled");
   elem.disabled = true;
}

function show(elem){
   elem.classList.remove('hidden')
}

function hide(elem){
   elem.classList.add('hidden')
}

submitButton.addEventListener('click', function(e) {
   e.preventDefault();
   // 提交时直接使用formData对象即可
   console.log('提交的数据:', formData)
})

优化点说明

1. 集中管理数据：用formData对象统一存储所有表单值，避免重复查询DOM获取值
2. 实时同步更新：监听输入元素的input事件，数据变化时立刻更新，用户返回修改步骤后，确认页会自动同步最新内容
3. 按需渲染：只有进入确认页时才执行渲染逻辑，减少不必要的DOM操作
4. 可维护性提升：添加新字段时，只需在HTML中增加输入框和对应的输出元素（保证输出元素ID为输入框name属性+Output），无需修改JS逻辑

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