PHP单选按钮点击上/下一页自动清空且无法提交至数据库问题求助

嘿，看你遇到了在线考试系统里单选按钮的麻烦——翻页（上/下一页）时选中的选项直接清空，而且选好的答案还没法提交到数据库，没法和标准答案匹配对吧？我帮你捋捋可能的原因和解决办法：

1. 先搞定翻页时状态丢失的问题 #

原因1：页面刷新式翻页导致状态重置 #

如果你的上/下一页按钮是靠刷新整个页面来切换题目（比如用普通<a>标签跳转，或者提交表单刷新页面），那页面重新加载后，单选按钮的选中状态肯定会消失，毕竟DOM都重新渲染了。

解决办法：

• 优先用AJAX异步加载题目，这样页面不会整体刷新，之前选中的单选按钮状态能一直保留在当前DOM里。
• 如果必须用页面刷新，那在翻页前把当前选中的单选按钮值存在本地存储（sessionStorage/localStorage）或者URL参数里，页面加载时再读取这个值，给对应的单选按钮加上checked属性。

举个本地存储的简单例子：

// 点击下一页前，保存当前题目的选中值
document.querySelector('#next-btn').addEventListener('click', function() {
  const selectedOption = document.querySelector('input[name="exam-option"]:checked');
  if (selectedOption) {
    // 用题目ID作为存储的key，避免不同题目混淆
    sessionStorage.setItem(`question_${currentQuestionId}_selected`, selectedOption.value);
  }
});

// 页面加载时，恢复之前选中的状态
window.addEventListener('load', function() {
  const savedValue = sessionStorage.getItem(`question_${currentQuestionId}_selected`);
  if (savedValue) {
    document.querySelector(`input[name="exam-option"][value="${savedValue}"]`).checked = true;
  }
});

原因2：单选按钮的name属性没和题目绑定 #

如果所有题目的单选按钮都用同一个name，或者动态替换题目（比如你代码里的replace_question div）时，没保留对应题目的name和选中状态，也会导致切换页面后状态丢失。

解决办法：

• 给每个题目的单选按钮设置唯一的name属性，比如name="question_1_option"、name="question_2_option"，这样不同题目的选中状态不会互相干扰。
• 动态替换题目内容前，先保存当前题目的选中值，替换DOM后再把选中值重新赋值给新的单选按钮。

2. 解决无法提交到数据库的问题 #

原因1：提交时没收集全所有题目的选中值 #

如果是多页表单，你可能只提交了当前页的选项，或者没有把所有题目的选中值统一收集后再发送给后端。

解决办法：

• 用JavaScript把所有题目的选中值收集起来，存在一个隐藏input里，或者作为AJAX请求的参数一起发送：

// 收集所有题目的选中答案
function collectAllAnswers() {
  const answers = {};
  // 假设每个单选按钮的name格式是question_{id}_option
  document.querySelectorAll('input[type="radio"]:checked').forEach(radio => {
    const questionId = radio.name.split('_')[1];
    answers[`question_${questionId}`] = radio.value;
  });
  return answers;
}

// 提交时发送数据到后端
document.querySelector('#submit-exam').addEventListener('click', function() {
  const answers = collectAllAnswers();
  fetch('/submit-exam', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(answers),
  })
  .then(res => res.json())
  .then(data => console.log('提交成功:', data))
  .catch(err => console.error('提交失败:', err));
});

原因2：后端没正确接收/存储数据 #

如果前端已经把数据发出去了，但数据库里没收到，要检查后端接口的参数名是否和前端发送的一致（比如前端传的是question_1，后端是不是用了对应的字段接收），还要确认数据库的字段类型和存储逻辑有没有问题。

3. 额外的小优化建议 #

• 给每个单选按钮加上<label>标签，点击文字也能选中选项，提升用户体验：

<div class="radio-item">
  <label>
    <input type="radio" name="question_1_option" value="A">
    选项A：这是选项内容
  </label>
</div>

• 测试时用浏览器开发者工具（F12）的Network标签，看看提交时发送的参数是否正确，以及后端的响应状态是否正常，能快速定位问题。

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