如何实现大学招生表单提交前的预览功能？

以下是一套可直接复用的实现方案，包含HTML结构、JavaScript逻辑，适配招生表单常见字段：

HTML 结构 #

先搭建表单主体和预览区域，把需要预览的字段和预览容器对应起来：

<!-- 招生表单 -->
<form id="admissionForm">
  <div>
    <label for="fullName">姓名：</label>
    <input type="text" id="fullName" name="fullName" required>
  </div>
  <div>
    <label for="studentId">学号：</label>
    <input type="text" id="studentId" name="studentId" required>
  </div>
  <div>
    <label for="major">报考专业：</label>
    <select id="major" name="major" required>
      <option value="">请选择专业</option>
      <option value="computerScience">计算机科学</option>
      <option value="electricalEngineering">电气工程</option>
      <option value="businessAdministration">工商管理</option>
    </select>
  </div>
  <div>
    <label>报考类别：</label>
    <input type="checkbox" name="category" value="undergraduate"> 本科
    <input type="checkbox" name="category" value="postgraduate"> 研究生
  </div>
  <div>
    <label for="phone">联系电话：</label>
    <input type="tel" id="phone" name="phone" required>
  </div>
  <div>
    <label for="personalStatement">个人陈述：</label>
    <textarea id="personalStatement" name="personalStatement" rows="4"></textarea>
  </div>
  
  <button type="button" id="previewBtn">预览表单内容</button>
  <button type="submit" id="submitBtn" style="display:none;">确认提交</button>
</form>

<!-- 预览区域 -->
<div id="previewArea" style="display:none; margin-top:20px; padding:15px; border:1px solid #ccc; border-radius:5px;">
  <h3>表单预览</h3>
  <p><strong>姓名：</strong><span id="previewName"></span></p>
  <p><strong>学号：</strong><span id="previewId"></span></p>
  <p><strong>报考专业：</strong><span id="previewMajor"></span></p>
  <p><strong>报考类别：</strong><span id="previewCategory"></span></p>
  <p><strong>联系电话：</strong><span id="previewPhone"></span></p>
  <p><strong>个人陈述：</strong><span id="previewStatement"></span></p>
  
  <button type="button" id="editBtn">返回编辑</button>
</div>

JavaScript 逻辑 #

实现点击预览按钮时抓取表单数据、填充预览区域，以及返回编辑的功能：

// 获取DOM元素
const form = document.getElementById('admissionForm');
const previewBtn = document.getElementById('previewBtn');
const editBtn = document.getElementById('editBtn');
const submitBtn = document.getElementById('submitBtn');
const previewArea = document.getElementById('previewArea');

// 预览按钮点击事件
previewBtn.addEventListener('click', function() {
  // 基础文本/输入框取值
  document.getElementById('previewName').textContent = document.getElementById('fullName').value || '未填写';
  document.getElementById('previewId').textContent = document.getElementById('studentId').value || '未填写';
  document.getElementById('previewPhone').textContent = document.getElementById('phone').value || '未填写';
  document.getElementById('previewStatement').textContent = document.getElementById('personalStatement').value || '未填写';

  // 下拉框取值（显示选项文本而非value）
  const majorSelect = document.getElementById('major');
  const selectedMajorText = majorSelect.options[majorSelect.selectedIndex].text;
  document.getElementById('previewMajor').textContent = selectedMajorText !== '请选择专业' ? selectedMajorText : '未选择';

  // 复选框取值
  const categoryCheckboxes = document.querySelectorAll('input[name="category"]:checked');
  const categoryValues = Array.from(categoryCheckboxes).map(checkbox => checkbox.nextSibling.textContent.trim());
  document.getElementById('previewCategory').textContent = categoryValues.length > 0 ? categoryValues.join('、') : '未选择';

  // 切换显示状态：隐藏表单，显示预览区和提交按钮
  form.style.display = 'none';
  previewArea.style.display = 'block';
  submitBtn.style.display = 'inline-block';
});

// 返回编辑按钮点击事件
editBtn.addEventListener('click', function() {
  // 切换回表单显示状态
  form.style.display = 'block';
  previewArea.style.display = 'none';
  submitBtn.style.display = 'none';
});

关键细节说明 #

• 区分不同表单控件的取值逻辑：文本框直接取value，下拉框要取选中选项的text，复选框需要遍历选中项拼接内容
• 处理空值情况，避免预览区域出现空白或undefined
• 通过切换元素的display属性实现表单和预览区的切换，无需跳转页面
• 预览完成后显示提交按钮，确保用户确认后再提交

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