如何为分步表单创建提交前的答案核对控制板块？

你可以通过前端JS读取同表单下的已填字段值，动态渲染到核对板块实现需求，不需要提前提交数据到后端保存，完整实现方案如下：

1. 修改模板核对板块，添加内容容器 #

在你现有CONTROL SECTION对应的fieldset标签内，新增用于展示核对内容的DOM节点：

<fieldset>
  <h1>提交前核对</h1>
  <!-- 核对内容展示容器 -->
  <div id="review-content" class="row mt-4 mb-4">
    <div class="col-2"></div>
    <div class="col-8" id="review-list">
      <!-- JS会动态把已填内容插入到这里 -->
    </div>
    <div class="col-2"></div>
  </div>
  <input type="button" name="previous" class="previous btn btn-outline-dark" value="返回修改" />
  <!-- 把原来的按钮改为submit类型，点击直接提交表单 -->
  <input type="submit" name="make_payment" class="next btn btn-outline-primary" value="确认提交" />
</fieldset>

2. 添加JS逻辑，实现内容收集和渲染 #

把以下代码添加到页面底部即可生效，每次用户点击进入核对页的按钮时，都会自动读取最新的表单内容渲染到核对区：

// 监听跳转到核对页的「Kontrol」按钮点击事件
document.querySelector('input[value="Kontrol"]').addEventListener('click', function () {
  const formEl = document.getElementById('msform');
  const reviewListEl = document.getElementById('review-list');
  // 清空上一次渲染的核对内容
  reviewListEl.innerHTML = '';

  // 遍历表单内所有输入字段
  const allFields = formEl.querySelectorAll('input, select, textarea');
  allFields.forEach(field => {
    // 跳过按钮、隐藏字段、CSRF令牌这类不需要展示的内容
    if (
      ['button', 'submit', 'hidden'].includes(field.type)
      || field.name === 'csrfmiddlewaretoken'
    ) return;

    // 获取字段对应的标签文本
    const fieldLabel = field.closest('.form-group')?.querySelector('label')?.textContent || field.name;
    // 处理不同类型字段的取值逻辑
    let fieldValue = '';
    if (field.type === 'checkbox') {
      fieldValue = field.checked ? '是' : '否';
    } else if (field.type === 'radio') {
      // 未选中的单选按钮不展示
      if (!field.checked) return;
      fieldValue = field.value;
    } else {
      fieldValue = field.value || '未填写';
    }

    // 组装成核对项插入到页面
    const itemEl = document.createElement('div');
    itemEl.className = 'mb-3 border-bottom pb-2';
    itemEl.innerHTML = `<span style="font-weight: 600;">${fieldLabel}：</span>${fieldValue}`;
    reviewListEl.appendChild(itemEl);
  });
});

兼容说明 #

• 所有字段都在同一个<form>标签内，和你原有提交逻辑完全兼容，用户确认后点击提交按钮会正常上传所有填写内容
• 用户返回修改字段后，再次点击进入核对页会自动读取最新的内容重新渲染，不需要额外做缓存处理
• 如果需要支持点击核对项直接跳转到对应字段所在的步骤，可额外给每个核对项绑定点击事件，根据字段name找到对应fieldset后切换展示即可

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