点击submit按钮后展示已填充内容的同格式表单实现方法

不需要改动原有表单的HTML结构和样式，只要加一段简单的JS逻辑就能实现需求，提交后表单布局、样式和填写内容都会完整保留。

完整实现代码 #

你只需要在页面末尾（</body>标签前）加入以下JavaScript代码即可：

const form = document.getElementById('survey-form');

form.addEventListener('submit', function(e) {
  // 阻止表单默认的跳转、刷新行为
  e.preventDefault();

  // 拿到所有表单交互元素
  const allControls = form.querySelectorAll('input, select, textarea, button');
  allControls.forEach(item => {
    // 禁用所有控件，保留已填内容且不可修改
    item.disabled = true;
  });

  // 可选：修改提交按钮状态提示用户提交完成
  const submitBtn = document.getElementById('submit');
  submitBtn.textContent = '提交成功';
  submitBtn.style.background = '#2ecc71';
})

实现原理 #

• 核心逻辑：调用e.preventDefault()拦截表单原生提交事件，避免页面重载清空已填内容
• 给所有输入、选择、文本域、按钮加上disabled属性后，用户填写的所有值都会完整保留，同时无法再编辑，整体布局和原表单完全一致，不会出现排版错乱
• 如果你需要把表单数据同步提交到后端，只需要在e.preventDefault()之后追加接口请求逻辑即可，通过new FormData(form)就能直接拿到所有表单字段的值，不会影响前端的展示效果

如果你不想要禁用控件默认的灰化样式，可以把普通输入框、文本域的disabled换成readonly属性；下拉选择控件不支持readonly，可以单独给下拉框除当前选中项之外的所有option加上disabled属性，实现不可修改的效果同时保留原有样式。

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