本文介绍如何在 PHP 表单中通过 JavaScript 实现“点击按钮动态追加新题目”的交互功能，解决服务端渲染导致的重复输出与按钮失效问题，确保页面初始仅显示一道题，后续题目按需加载。
本文介绍如何在 PHP 表单中通过 JavaScript 实现“点击按钮动态追加新题目”的交互功能，解决服务端渲染导致的重复输出与按钮失效问题，确保页面初始仅显示一道题，后续题目按需加载。
在构建在线测验系统（如 PHP 后端的创建试卷页）时，常见的需求是：表单初始仅包含第 1 道题目，用户每点击一次「新增题目」按钮，就在表单底部动态插入一套结构完整的新题目区块（含题干输入框、4 个答案文本域及对应正确选项复选框）。关键误区在于：试图在 PHP 的 onclick 属性中直接拼接 HTML 字符串并执行 PHP 变量递增（如 $questionNum++）——这是完全无效的，因为 onclick 是前端 JavaScript 事件，PHP 代码早已在服务端执行完毕，无法在浏览器中实时运行。
✅ 正确方案是：前后端职责分离
- PHP 负责生成初始静态结构（第 1 题 + 按钮）；
- JavaScript 负责监听点击、动态生成并追加 DOM 元素；
- 所有题目字段需采用数组式命名（如 name="questions[0][text]"），便于 PHP 后端统一接收和解析。
以下是可直接运行的完整示例：
立即学习“Java免费学习笔记（深入）”；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态添加题目表单</title>
<style>
.question-group { margin: 20px 0; padding: 12px; border: 1px solid #e0e0e0; border-radius: 4px; }
.question-group h3 { margin-top: 0; color: #333; }
textarea { width: 100%; height: 60px; margin-bottom: 8px; }
.answer-option { margin: 6px 0; }
</style>
</head>
<body>
<form method="post" id="quizForm">
<!-- 初始题目（第1题） -->
<div class="question-group" data-index="0">
<h3>题目 1</h3>
<label>题干：<input type="text" name="questions[0][text]" placeholder="请输入题目内容" required></label><br><br>
<div class="answer-option">
<label>答案 1：<textarea name="questions[0][answers][0][text]" placeholder="答案1内容" required></textarea></label>
<label><input type="checkbox" name="questions[0][answers][0][correct]" value="1"> 正确答案</label>
</div>
<div class="answer-option">
<label>答案 2：<textarea name="questions[0][answers][1][text]" placeholder="答案2内容" required></textarea></label>
<label><input type="checkbox" name="questions[0][answers][1][correct]" value="1"> 正确答案</label>
</div>
<div class="answer-option">
<label>答案 3：<textarea name="questions[0][answers][2][text]" placeholder="答案3内容" required></textarea></label>
<label><input type="checkbox" name="questions[0][answers][2][correct]" value="1"> 正确答案</label>
</div>
<div class="answer-option">
<label>答案 4：<textarea name="questions[0][answers][3][text]" placeholder="答案4内容" required></textarea></label>
<label><input type="checkbox" name="questions[0][answers][3][correct]" value="1"> 正确答案</label>
</div>
</div>
<!-- 新增题目按钮 -->
<button type="button" id="addQuestionBtn">➕ 新增题目</button>
<br><br>
<button type="submit">提交试卷</button>
</form>
<script>
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('quizForm');
const addButton = document.getElementById('addQuestionBtn');
let questionIndex = 1; // 从第2题开始计数（索引为1）
addButton.addEventListener('click', function() {
// 创建新的题目区块
const newGroup = document.createElement('div');
newGroup.className = 'question-group';
newGroup.dataset.index = questionIndex;
const questionNum = questionIndex + 1; // 显示为“题目 2, 3...”
newGroup.innerHTML = `
<h3>题目 ${questionNum}</h3>
<label>题干：<input type="text" name="questions[${questionIndex}][text]" placeholder="请输入题目内容" required></label><br><br>
<div class="answer-option">
<label>答案 1：<textarea name="questions[${questionIndex}][answers][0][text]" placeholder="答案1内容" required></textarea></label>
<label><input type="checkbox" name="questions[${questionIndex}][answers][0][correct]" value="1"> 正确答案</label>
</div>
<div class="answer-option">
<label>答案 2：<textarea name="questions[${questionIndex}][answers][1][text]" placeholder="答案2内容" required></textarea></label>
<label><input type="checkbox" name="questions[${questionIndex}][answers][1][correct]" value="1"> 正确答案</label>
</div>
<div class="answer-option">
<label>答案 3：<textarea name="questions[${questionIndex}][answers][2][text]" placeholder="答案3内容" required></textarea></label>
<label><input type="checkbox" name="questions[${questionIndex}][answers][2][correct]" value="1"> 正确答案</label>
</div>
<div class="answer-option">
<label>答案 4：<textarea name="questions[${questionIndex}][answers][3][text]" placeholder="答案4内容" required></textarea></label>
<label><input type="checkbox" name="questions[${questionIndex}][answers][3][correct]" value="1"> 正确答案</label>
</div>
`;
// 追加到表单末尾（按钮上方）
form.insertBefore(newGroup, addButton);
questionIndex++;
});
});
</script>
</body>
</html>? 重要注意事项：
- ✅ 命名规范：所有字段均采用嵌套数组名（如 questions[0][text], questions[0][answers][2][correct]），PHP 后端可通过 $_POST['questions'] 直接获取结构化二维数组，无需手动解析；
- ❌ 禁止在 onclick 中写 PHP 逻辑：onclick 是纯 JS 上下文，PHP 代码不会执行，且内联脚本易引发 XSS 风险；
- ⚠️ 避免 ID 冲突：若需为每个题目添加独立操作（如删除），请为元素动态生成唯一 ID 或使用事件委托；
- ? 后端校验不可省略：前端动态添加仅提升体验，PHP 必须验证 $_POST['questions'] 是否非空、每题是否至少有一个答案、是否恰好一个正确选项等；
- ? 进阶建议：可配合 AJAX 实现无刷新预览/保存草稿，或使用 Vue/React 等框架管理更复杂的状态。
通过该方案，你将获得一个响应迅速、结构清晰、安全可控的动态题目表单，完美支撑测验系统的灵活出题需求。
