如何使用HTML/CSS/JS实现同一用户回访表单页时禁用提交按钮

结论 #

仅使用HTML、CSS、JavaScript完全可以实现该需求，核心依赖浏览器本地存储localStorage记录同一用户的提交状态即可。

实现逻辑 #

• 页面加载完成后，优先读取本地存储中是否存在表单已提交的标记
• 若存在已提交标记，直接将提交按钮设置为禁用状态
• 监听表单提交事件，提交成功后往本地存储写入已提交标记，同时禁用提交按钮

完整实现代码 #

<form id="userForm">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="First Name"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Last Name"><br><br>
  <input type="submit" value="Submit" id="submitBtn">
</form> 

<script>
// 页面初始化时检查提交状态
const submitBtn = document.getElementById('submitBtn');
const userForm = document.getElementById('userForm');

window.addEventListener('load', () => {
  // 读取本地存储的提交标记
  const isSubmitted = localStorage.getItem('form_submitted');
  if (isSubmitted === 'true') {
    submitBtn.disabled = true;
    submitBtn.value = '您已提交过表单';
  }
})

// 监听表单提交事件
userForm.addEventListener('submit', (e) => {
  // 阻止默认表单跳转行为，若需要提交到后端可在此处添加AJAX/fetch请求逻辑
  e.preventDefault();
  // 写入提交标记到本地存储
  localStorage.setItem('form_submitted', 'true');
  submitBtn.disabled = true;
  submitBtn.value = '提交成功';
})
</script>

注意事项 #

该方案仅在当前浏览器环境生效，如果用户清除浏览器缓存、更换浏览器/设备，本地存储的提交标记会丢失，限制会失效。如果需要跨端、更可靠的提交限制，需要配合后端服务存储用户提交状态实现。

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