PHP表单选中按钮值无法存入数据库的问题求助

实现了一个需选择3门学科才可提交的表单，前端选择/取消功能正常，但提交后无法将选中值存入数据库。选择3个按钮提交后出现以下错误：

Notice: Undefined index: selectedButton

Notice: Trying to access array offset on value of type null

同时无法更新user_form表中对应用户的subject1、subject2、subject3字段值。

表单HTML代码 #

<form id="myForm" action="" method="post">
    <label for="subjects">Select your school subjects select 3:</label><br>
    <button type="button" name="selectedButton" class="redirect-button" value="math" onclick="selectButton(this)">Math</button>
    <button type="button" name="selectedButton" class="redirect-button" value="science" onclick="selectButton(this)">Science</button>
    <button type="button" name="selectedButton" class="redirect-button" value="english" onclick="selectButton(this)">English</button>
    <button type="button" name="selectedButton" class="redirect-button" value="history" onclick="selectButton(this)">History</button>
    <button type="button" name="selectedButton" class="redirect-button" value="adv_math" onclick="selectButton(this)">Advanced Math</button>
    <button type="button" name="selectedButton" class="redirect-button" value="calculus" onclick="selectButton(this)">Calculus</button>
    <button type="button" name="selectedButton" class="redirect-button" value="other" onclick="selectButton(this)">Other</button>
    <br>
    <br>
    <button type="submit" class="btn btn-success" disabled>Submit</button>
    Selected: <span class="badge badge-light ml-2" id="selectedCount">0</span>/3
</form>

PHP代码 #

<?php

include 'config.php';
session_start();
$user_id = $_SESSION['user_id'];
if ($_SERVER['REQUEST_METHOD'] === 'POST') {

    $selectedButtons = $_POST['selectedButton'];
    $subject1 = $selectedButtons[0];
    $subject2 = $selectedButtons[1];
    $subject3 = $selectedButtons[2];

    // Insert the subjects into the database
    mysqli_query($conn, "UPDATE `user_form` SET subject1 = '$subject1', subject2 = '$subject2', subject3='$subject3' WHERE id = '$user_id'") or die('query failed');
}

?>

JavaScript代码 #

let selectedCount = 0;
const form = document.getElementById("myForm");
const submitButton = form.querySelector('button[type="submit"]');
const selectedCountSpan = document.getElementById("selectedCount");

function selectButton(button) {
  if (button.classList.contains("btn-selected")) {
    // Unselect the button
    button.classList.remove("btn-selected");
    selectedCount--;
  } else if (selectedCount < 3) {
    // Select the button
    button.classList.add("btn-selected");
    selectedCount++;
  }

  // Update the selected count display and enable or disable the submit button
  selectedCountSpan.textContent = selectedCount;
  submitButton.disabled = selectedCount === 0;
}

已尝试操作 #

尝试直接从数组中取值，但所有值均为null：

$subject1 = $selectedButtons[0];
$subject2 = $selectedButtons[1];
$subject3 = $selectedButtons[2];

问题核心是**type="button"的按钮不会随表单提交发送数据**，且你没有将选中的学科值存储到表单的可提交元素中。以下是修复步骤：

1. 添加隐藏域存储选中值 #

在表单内部新增3个隐藏输入框，用来存放选中的学科值：

<form id="myForm" action="" method="post">
    <!-- 保留原有的标签和按钮 -->
    <input type="hidden" name="subject1" id="subject1">
    <input type="hidden" name="subject2" id="subject2">
    <input type="hidden" name="subject3" id="subject3">
    <!-- 保留原有的提交按钮和计数显示 -->
</form>

2. 修改JS逻辑，同步更新隐藏域 #

更新selectButton函数，用数组维护选中的学科列表，并同步到隐藏域：

let selectedSubjects = []; // 存储选中的学科值
const form = document.getElementById("myForm");
const submitButton = form.querySelector('button[type="submit"]');
const selectedCountSpan = document.getElementById("selectedCount");
// 获取隐藏域元素
const subject1Input = document.getElementById("subject1");
const subject2Input = document.getElementById("subject2");
const subject3Input = document.getElementById("subject3");

function selectButton(button) {
  const subjectValue = button.value;
  const isSelected = button.classList.contains("btn-selected");

  if (isSelected) {
    // 取消选中：从数组移除对应值
    selectedSubjects = selectedSubjects.filter(sub => sub !== subjectValue);
    button.classList.remove("btn-selected");
  } else if (selectedSubjects.length < 3) {
    // 添加选中：将值加入数组
    selectedSubjects.push(subjectValue);
    button.classList.add("btn-selected");
  }

  // 更新计数和提交按钮状态（只有选满3个才启用提交）
  selectedCountSpan.textContent = selectedSubjects.length;
  submitButton.disabled = selectedSubjects.length !== 3;

  // 同步更新隐藏域的值
  subject1Input.value = selectedSubjects[0] || "";
  subject2Input.value = selectedSubjects[1] || "";
  subject3Input.value = selectedSubjects[2] || "";
}

3. 修改PHP代码，接收隐藏域值并防注入 #

直接从$_POST获取隐藏域参数，同时改用预处理语句避免SQL注入：

<?php
include 'config.php';
session_start();

// 先验证用户登录状态
if (!isset($_SESSION['user_id'])) {
    die('用户未登录');
}
$user_id = $_SESSION['user_id'];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 获取隐藏域的值，为空时设为空字符串
    $subject1 = $_POST['subject1'] ?? '';
    $subject2 = $_POST['subject2'] ?? '';
    $subject3 = $_POST['subject3'] ?? '';

    // 使用预处理语句执行更新
    $stmt = mysqli_prepare($conn, "UPDATE `user_form` SET subject1 = ?, subject2 = ?, subject3 = ? WHERE id = ?");
    mysqli_stmt_bind_param($stmt, "sssi", $subject1, $subject2, $subject3, $user_id);
    
    if(mysqli_stmt_execute($stmt)){
        echo '学科选择已保存'; // 可替换为跳转或其他提示
    } else {
        die('更新失败: ' . mysqli_stmt_error($stmt));
    }
    mysqli_stmt_close($stmt);
}
?>

额外优化建议 #

• 给选中的按钮添加样式（比如背景色变化），提升用户体验
• 提交前再次验证选中数量，防止前端被篡改后提交无效数据
• 处理取消选中后的补位逻辑（比如取消第一个选中项后，后面的项自动前移）

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