PHP数组传递至JavaScript变量未定义及动态输入计算问题

你现在遇到的「变量未找到」错误，核心是踩了服务器端PHP和客户端JavaScript运行逻辑的常见坑：

• PHP是在服务器把页面发送给浏览器之前就执行完毕的，页面到你手里之后，PHP就彻底“退场”了。你在calculate()里写的var test = <?php echo json_encode($test); ?>;，这里的$test是服务器端的变量——要么页面加载时用户还没输入，它是空的；要么你根本没在服务器端定义过这个变量，自然会报错。
• 而动态输入框里的内容是用户在浏览器里输入的客户端数据，得用JavaScript实时去获取，不能指望PHP把值“塞”给你。

把你的calculate()函数改成这样，直接遍历所有test[]输入框计算总和：

function calculate() {
  // 找出所有name为test[]的输入元素
  const testInputs = document.querySelectorAll('input[name="test[]"]');
  let total = 0;

  // 遍历每个输入框，累加数值
  testInputs.forEach(input => {
    // 把输入值转为数字，空值或非数字按0处理
    const num = parseFloat(input.value) || 0;
    total += num;
  });

  alert(`当前总和：${total}`);
  console.log(`当前总和：${total}`);
}

另外，建议把内联的onchange换成更规范的事件绑定（避免HTML和JS混写），可以在页面底部加这段脚本：

<input type="text" name="test[]" placeholder="test">
<input type="text" name="test[]" placeholder="test">
<!-- 可以多添加几个测试用的输入框 -->

<script>
// 等页面加载完成后再绑定事件
document.addEventListener('DOMContentLoaded', () => {
  const allTestInputs = document.querySelectorAll('input[name="test[]"]');
  allTestInputs.forEach(input => {
    input.addEventListener('change', calculate);
  });
});

// 求和函数放在这里
function calculate() {
  const testInputs = document.querySelectorAll('input[name="test[]"]');
  let total = 0;
  testInputs.forEach(input => {
    const num = parseFloat(input.value) || 0;
    total += num;
  });
  alert(`当前总和：${total}`);
  console.log(`当前总和：${total}`);
}
</script>

你后端处理$_POST['test']的思路是对的——表单提交时，test[]会以数组形式传到服务器，你可以像这样遍历处理（记得做好SQL注入防护）：

// 假设你已经有数据库连接$conn
foreach($_POST['test'] as $key => $val) {
  // 转义输入值，防止SQL注入
  $safeVal = mysqli_real_escape_string($conn, $val);
  // 执行插入操作，示例：
  // $sql = "INSERT INTO your_table (test_value) VALUES ('$safeVal')";
  // mysqli_query($conn, $sql);
}

总结一下：前端实时计算用JS管客户端输入，后端存数据用PHP处理提交的数组，别让前后端的变量串在一起就行～

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