HTML实现表单提交后展示不可编辑已填完整表单的方法

你已完成的表单基础结构、复选框单选互斥、动态必填校验逻辑无需改动，直接追加以下逻辑即可实现和Google表单一致的提交后回执效果：

1. 提前搭建双容器视图结构 #

在现有页面中放两个平级容器，通过Bootstrap的d-none类控制显示隐藏，不需要跳转新页面：

• 第一个容器包裹你已经写完的可编辑表单，默认显示
• 第二个容器为回执页容器，默认隐藏，内置操作按钮区和内容展示区
  基础结构参考：

<!-- 原有可编辑表单容器 -->
<div id="editableFormWrap">
  <!-- 你已经开发完成的所有表单字段放这里 -->
  <button id="formSubmitBtn" type="button" class="btn btn-primary">提交</button>
</div>

<!-- 提交后回执容器 默认隐藏 -->
<div id="receiptWrap" class="d-none py-4">
  <!-- 操作按钮区 -->
  <div class="d-flex justify-content-end gap-2 mb-4">
    <button id="backToEditBtn" type="button" class="btn btn-outline-secondary">返回修改</button>
    <button id="printReceiptBtn" type="button" class="btn btn-primary">打印/保存</button>
  </div>
  <!-- 回执内容卡片 -->
  <div class="card shadow-sm">
    <div class="card-header bg-white">
      <h5 class="mb-0">已提交的表单内容</h5>
    </div>
    <div class="card-body" id="receiptContentArea">
      <!-- 动态填充已填内容 -->
    </div>
  </div>
</div>

2. 提交校验通过后抓取并渲染已填内容 #

找到你现有代码里表单提交、校验通过的回调分支，追加字段值遍历、视图切换逻辑：

$('#formSubmitBtn').on('click', function() {
  // 这里保留你已经写好的动态必填校验逻辑
  // 校验不通过直接return，不执行后续逻辑
  // if (!checkFormRequired()) return

  const filledData = [];
  // 遍历所有表单项，选择器可根据你实际的表单DOM结构调整
  $('.form-item').each(function() {
    // 取字段标签名
    const fieldName = $(this).find('label').first().text().trim();
    let fieldVal = '';
    const fieldType = $(this).find('input, select, textarea').first().attr('type');

    // 按字段类型取值
    if (fieldType === 'radio' || fieldType === 'checkbox') {
      // 单选/你做了互斥的复选框，直接取选中项的文本
      fieldVal = $(this).find('input:checked').closest('.form-check').text().trim();
      // 如果是多选复选框，替换为下面的遍历逻辑
      // const checkedList = [];
      // $(this).find('input:checked').each(function() {
      //   checkedList.push($(this).closest('.form-check').text().trim());
      // })
      // fieldVal = checkedList.length ? checkedList.join('、') : '未填写';
    } else if (fieldType === 'select-one' || fieldType === 'select-multiple') {
      fieldVal = $(this).find('select').find('option:selected').text().trim();
    } else {
      // 普通文本、数字、日期、邮箱、文本域等直接取val
      fieldVal = $(this).find('input, textarea').val().trim();
    }

    filledData.push({
      label: fieldName,
      value: fieldVal || '未填写'
    })
  })

  // 把抓取到的数据渲染到回执区域
  let contentHtml = '<dl class="row mb-0">';
  filledData.forEach(item => {
    contentHtml += `
      <dt class="col-sm-3 text-muted fw-normal">${item.label}</dt>
      <dd class="col-sm-9 mb-3">${item.value}</dd>
    `
  })
  contentHtml += '</dl>';
  $('#receiptContentArea').html(contentHtml);

  // 切换视图：隐藏可编辑表单，显示回执，滚动到顶部
  $('#editableFormWrap').addClass('d-none');
  $('#receiptWrap').removeClass('d-none');
  window.scrollTo({top: 0, behavior: 'smooth'});
})

回执区域渲染的是纯文本DOM，本身就不可编辑，不需要额外给表单元素加disabled属性，避免原生禁用样式和回执页风格冲突。

3. 操作按钮功能实现 #

返回修改 #

点击后切回可编辑表单即可，用户之前填写的内容不会丢失：

$('#backToEditBtn').on('click', function() {
  $('#receiptWrap').addClass('d-none');
  $('#editableFormWrap').removeClass('d-none');
})

打印/保存 #

调用浏览器原生打印API，配合打印专用样式实现只打印回执内容，用户在打印弹窗选择「另存为PDF」即可完成保存，和Google表单的交互逻辑完全一致，无第三方依赖：

// 注入打印专用样式，隐藏操作按钮等无关元素
$('head').append(`
  <style media="print">
    @page { size: A4; margin: 1.2cm; }
    body * { visibility: hidden; }
    #receiptWrap, #receiptWrap * { visibility: visible; }
    #receiptWrap { position: absolute; top: 0; left: 0; width: 100%; }
    #receiptWrap .d-flex.justify-content-end { display: none !important; }
    .card { border: none !important; box-shadow: none !important; }
  </style>
`)

$('#printReceiptBtn').on('click', function() {
  window.print();
})

可选扩展 #

如果需要支持直接生成PDF下载不需要用户手动选打印选项，可以引入html2canvas+jsPDF实现前端截图生成PDF，但原生打印方案兼容性最好、包体积为0，优先推荐。
如果需要把表单数据提交到后端，只需要在视图切换前加$.ajax提交逻辑即可，不影响前端回执展示。

内容的提问来源于stack exchange，提问作者Md Mohtesham Azam