如何在多步骤表单最后一步展示用户所有选择的表单值？

我正在开发一个分步骤的酒店预订表单，已经实现了步骤切换功能，但在最后一步“Registration Confirm”的容器里，无法展示用户之前选择的所有内容。尝试用sessionStorage存储读取值，但没效果，控制台也没报错，求JS/jQuery解决方案。

尝试的代码：

const destination = document.getElementById('result-destination').value;
sessionStorage.setItem("DESTINATION", destination);
const destinationChoice = sessionStorage.getItem('DESTINATION');
document.getElementById('choiceDestination').innerHTML = destinationChoice;

核心问题是你没有在切换到确认页时触发数据读取和渲染，之前的代码仅执行一次，未与步骤切换逻辑关联。以下是完整修改方案：

1. 重构数据渲染逻辑 #

无需依赖sessionStorage（除非需要页面刷新后保留数据），直接在进入确认步骤时，实时读取所有表单字段的值并渲染到确认区域。

2. 修改form.js代码 #

替换原有form.js内容，新增数据收集与渲染函数：

const prevBtns = document.querySelectorAll(".btn-prev");
const nextBtns = document.querySelectorAll(".btn-next");
const progress = document.getElementById("progress");
const formSteps = document.querySelectorAll(".form-step");
const progressSteps = document.querySelectorAll(".progress-step");

let formStepsNum = 0;

nextBtns.forEach((btn) => {
  btn.addEventListener("click", () => {
    formStepsNum++;
    updateFormSteps();
    updateProgressbar();
    // 切换到确认页时触发数据渲染
    if (formStepsNum === 3) {
      renderConfirmationData();
    }
  });
});

prevBtns.forEach((btn) => {
  btn.addEventListener("click", () => {
    formStepsNum--;
    updateFormSteps();
    updateProgressbar();
  });
});

function updateFormSteps() {
  formSteps.forEach((formStep) => {
    formStep.classList.contains("form-step-active") &&
      formStep.classList.remove("form-step-active");
  });

  formSteps[formStepsNum].classList.add("form-step-active");
}

function updateProgressbar() {
  progressSteps.forEach((progressStep, idx) => {
    if (idx < formStepsNum + 1) {
      progressStep.classList.add("progress-step-active");
    } else {
      progressStep.classList.remove("progress-step-active");
    }
  });

  const progressActive = document.querySelectorAll(".progress-step-active");

  progress.style.width =
    ((progressActive.length - 1) / (progressSteps.length - 1)) * 100 + "%";
}

// 新增：收集并渲染确认数据的函数
function renderConfirmationData() {
  // 读取所有表单字段的值
  const destination = document.getElementById('result-destination').value;
  const room = document.getElementById('result-room').value;
  const checkin = document.getElementById('result-checkin').value;
  const checkout = document.getElementById('result-checkout').value;
  const name = document.getElementById('name').value;
  const phone = document.getElementById('phone').value;
  const email = document.getElementById('email').value;
  const guests = document.getElementById('guestNumber').options[document.getElementById('guestNumber').selectedIndex].text;
  const amenities = document.getElementById('amenities').value;

  // 将值渲染到确认区域
  document.getElementById('choiceDestination').textContent = `Destination: ${destination}`;
  document.getElementById('choiceRoom').textContent = `Room Type: ${room}`;
  document.getElementById('choiceCheckin').textContent = `Check-in Date: ${checkin}`;
  document.getElementById('choiceCheckout').textContent = `Check-out Date: ${checkout}`;
  document.getElementById('choiceName').textContent = `Name: ${name}`;
  document.getElementById('choicePhone').textContent = `Phone: ${phone}`;
  document.getElementById('choiceEmail').textContent = `Email: ${email}`;
  document.getElementById('choiceGuests').textContent = `Number of Guests: ${guests}`;
  document.getElementById('choiceAmenities').textContent = `Amenities Quantity: ${amenities}`;
}

3. 逻辑说明 #

• 点击下一步按钮时，判断是否进入确认步骤（步骤索引为3，从0开始计数）
• 调用renderConfirmationData函数实时读取每个表单元素的当前值
• 下拉框guestNumber使用options[selectedIndex].text获取显示文本，更符合用户查看需求
• 用textContent替代innerHTML，避免XSS风险，更安全

4. 可选：保留sessionStorage的方案 #

若需要页面刷新后仍保留用户输入，可在步骤切换时存储数据：

// 在nextBtns的click事件中添加
if (formStepsNum === 0) {
  // 第一步到第二步时存储目的地和房间信息
  sessionStorage.setItem("DESTINATION", document.getElementById('result-destination').value);
  sessionStorage.setItem("ROOM", document.getElementById('result-room').value);
  sessionStorage.setItem("CHECKIN", document.getElementById('result-checkin').value);
  sessionStorage.setItem("CHECKOUT", document.getElementById('result-checkout').value);
} else if (formStepsNum === 1) {
  // 第二步到第三步时存储联系信息
  sessionStorage.setItem("NAME", document.getElementById('name').value);
  sessionStorage.setItem("PHONE", document.getElementById('phone').value);
  sessionStorage.setItem("EMAIL", document.getElementById('email').value);
} else if (formStepsNum === 2) {
  // 第三步到第四步时存储额外信息
  sessionStorage.setItem("GUESTS", document.getElementById('guestNumber').options[document.getElementById('guestNumber').selectedIndex].text);
  sessionStorage.setItem("AMENITIES", document.getElementById('amenities').value);
}

然后在renderConfirmationData中读取sessionStorage的值：

function renderConfirmationData() {
  const destination = sessionStorage.getItem("DESTINATION");
  const room = sessionStorage.getItem("ROOM");
  // ... 其他字段同理
}

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