点击日历日期后如何将值传入PHP变量并写入数据库

没问题，咱们一步步来解决这个问题——你现在的日历日期只是纯文本，点击后没法把值传给表单，所以PHP自然拿不到$day变量。这里有两种简单靠谱的实现方式，你可以选适合自己的：

方法一：隐藏输入框+JavaScript（交互友好，推荐） #

这个方法会让用户点击日历日期后，把选中的日期值存入一个隐藏的表单输入框，提交表单时就能一起传给PHP了，还能给用户添加选中反馈。

1. 修改表单，添加隐藏输入框 #

在表单里（比如日历div的后面）加一个隐藏的input，用来存选中的日期：

<form action="insert.php" method="POST">
  <!-- 你的下拉框代码 -->
  <div id="main">
    <!-- 你的日历表格代码 -->
  </div>
  <!-- 添加隐藏输入框 -->
  <input type="hidden" name="day" id="selectedDay">
  <!-- 你的提交按钮 -->
</form>

2. 给日历日期添加点击事件 #

给日历里所有可选择的日期（非灰色的<td>）加上点击事件，比如：

<td onclick="setDay(this)">1</td>
<td onclick="setDay(this)">2</td>
<td onclick="setDay(this)">3</td>
<!-- 其他非灰色日期同理，灰色的不用加 -->

3. 编写JavaScript函数处理点击 #

在页面的<script>标签里写这个函数，用来把选中的日期值存入隐藏输入框，同时给选中的日期加样式：

function setDay(element) {
  // 获取点击的日期文本
  const dayValue = element.textContent.trim();
  // 把值设置到隐藏输入框
  document.getElementById('selectedDay').value = dayValue;
  
  // 给选中的日期加样式，方便用户看到选中状态
  // 先移除所有非灰色日期的选中样式
  document.querySelectorAll('#main td:not(.gray)').forEach(td => td.classList.remove('selected'));
  // 给当前点击的日期添加选中样式
  element.classList.add('selected');
}

4. 加个CSS样式增强体验 #

给选中的日期加个背景色，让用户一眼看到自己选了哪个：

#main td:not(.gray) {
  cursor: pointer; /* 鼠标悬停显示手型 */
}
#main td.selected {
  background-color: #0d6efd; /* 蓝色背景，和你的按钮风格一致 */
  color: white;
}

方法二：纯HTML单选按钮（无需JavaScript） #

如果不想用JS，也可以把每个日期做成隐藏的单选按钮，点击日期文本就选中对应的单选框，表单提交时自动传值。

修改日历的日期单元格，每个可选择的日期改成这样：

<td>
  <input type="radio" name="day" value="1" id="day1" style="display: none;">
  <label for="day1">1</label>
</td>
<td>
  <input type="radio" name="day" value="2" id="day2" style="display: none;">
  <label for="day2">2</label>
</td>

这样点击<label>（也就是日期数字）就会自动选中对应的单选按钮，提交表单时$_POST['day']就能拿到选中的日期值了。你也可以给选中的label加CSS样式，比如：

#main td label {
  display: block;
  padding: 5px;
  cursor: pointer;
}
#main td input[type="radio"]:checked + label {
  background-color: #0d6efd;
  color: white;
}

重要提醒：修复PHP的安全问题 #

你原来的PHP代码直接把用户输入拼进SQL语句，存在严重的SQL注入风险！一定要用预处理语句来防止这个问题，修改后的PHP代码如下：

<?php
session_start();
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_NAME', 'calendar');

// 创建数据库连接
$con = new mysqli(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);

// 检查连接是否成功
if ($con->connect_error) {
    die("连接失败: " . $con->connect_error);
}

// 检查是否有提交的表单数据
if(isset($_POST['save_select'], $_POST['name'], $_POST['day'])){
    $name = $_POST['name'];
    $day = $_POST['day'];

    // 使用预处理语句，防止SQL注入
    $query = "INSERT INTO ferias (name, day, year, month, week, dateferia, recordtype, time) VALUES (?, ?, '123', '1', '1', '2021-01-01', '6', '1')";
    $stmt = $con->prepare($query);
    // 绑定参数，"ss"表示两个字符串类型的参数
    $stmt->bind_param("ss", $name, $day);

    if($stmt->execute()){
        $_SESSION['status'] = "插入成功";
    } else {
        $_SESSION['status'] = "插入失败: " . $stmt->error;
    }
    $stmt->close();
} else {
    $_SESSION['status'] = "缺少必填字段";
}

$con->close();
header("Location: ../1.php");
exit;
?>

这样修改后，你点击日历上的日期，选中的值就会传递到PHP的$day变量里，然后就能正常插入数据库啦。

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