PHP预订系统：实现勾选后自动填充Modal的时段与房间字段

一、调整预订表格的HTML结构（PHP生成部分） #

给每个复选框添加自定义属性存储房间和时段信息，方便前端JS获取数据：

<table id="booking-table">
    <thead>
        <tr>
            <th>房间</th>
            <th>09:00-10:00</th>
            <th>10:00-11:00</th>
            <!-- 按需添加更多时段列 -->
        </tr>
    </thead>
    <tbody>
        <?php foreach ($rooms as $room): ?>
        <tr>
            <td><?php echo htmlspecialchars($room['name']); ?></td>
            <?php foreach ($timeSlots as $slot): ?>
            <td>
                <input type="checkbox" class="booking-checkbox" 
                       data-room="<?php echo htmlspecialchars($room['name']); ?>" 
                       data-time-slot="<?php echo htmlspecialchars($slot); ?>"
                       id="book-<?php echo $room['id'] . '-' . str_replace(':', '', $slot); ?>">
                <label for="book-<?php echo $room['id'] . '-' . str_replace(':', '', $slot); ?>">Book</label>
            </td>
            <?php endforeach; ?>
        </tr>
        <?php endforeach; ?>
    </tbody>
</table>

<button id="open-booking-modal">确认预订</button>

二、调整Modal的HTML结构 #

给需要填充内容的区域设置ID，便于JS操作：

<div class="modal" id="booking-modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>确认预订信息</h2>
        <div>
            <h3>选中的预订项：</h3>
            <ul id="selected-bookings"></ul>
            <!-- 如果需要单个输入框展示，可添加以下代码 -->
            <!-- <div>
                <label>房间：<input type="text" id="modal-room" readonly></label>
            </div>
            <div>
                <label>时段：<input type="text" id="modal-time-slot" readonly></label>
            </div> -->
        </div>
        <button id="submit-booking">提交预订</button>
    </div>
</div>

三、JavaScript实现核心逻辑 #

完成勾选数据收集、Modal填充和交互控制：

// 获取页面元素
const openModalBtn = document.getElementById('open-booking-modal');
const modal = document.getElementById('booking-modal');
const closeModalBtn = document.querySelector('.close');
const selectedList = document.getElementById('selected-bookings');
const submitBtn = document.getElementById('submit-booking');

// 打开Modal并填充选中数据
openModalBtn.addEventListener('click', () => {
    // 清空Modal原有内容
    selectedList.innerHTML = '';
    // 获取所有已勾选的复选框
    const checkedBoxes = document.querySelectorAll('.booking-checkbox:checked');

    if (checkedBoxes.length === 0) {
        alert('请至少选择一个房间时段');
        return;
    }

    // 遍历勾选框，生成预订信息列表
    checkedBoxes.forEach(box => {
        const room = box.dataset.room;
        const timeSlot = box.dataset.timeSlot;
        const listItem = document.createElement('li');
        listItem.textContent = `房间：${room} | 时段：${timeSlot}`;
        selectedList.appendChild(listItem);

        // 如果是单选项填充场景，替换为以下代码
        // document.getElementById('modal-room').value = room;
        // document.getElementById('modal-time-slot').value = timeSlot;
    });

    // 显示Modal
    modal.style.display = 'block';
});

// 关闭Modal事件
closeModalBtn.addEventListener('click', () => {
    modal.style.display = 'none';
});

// 点击Modal外部关闭
window.addEventListener('click', (e) => {
    if (e.target === modal) modal.style.display = 'none';
});

// 提交预订（可选，发送数据到后端）
submitBtn.addEventListener('click', () => {
    const checkedBoxes = document.querySelectorAll('.booking-checkbox:checked');
    const bookings = [];

    checkedBoxes.forEach(box => {
        bookings.push({
            room: box.dataset.room,
            timeSlot: box.dataset.timeSlot
        });
    });

    // 通过fetch发送数据到PHP后端
    fetch('submit-booking.php', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(bookings)
    })
    .then(res => res.json())
    .then(data => {
        alert('预订提交成功');
        modal.style.display = 'none';
        // 清空勾选状态
        checkedBoxes.forEach(box => box.checked = false);
    })
    .catch(err => {
        console.error('提交失败:', err);
        alert('预订提交失败，请重试');
    });
});

四、后端PHP处理示例（submit-booking.php） #

接收前端数据并写入数据库：

<?php
// 接收JSON数据
$bookings = json_decode(file_get_contents('php://input'), true);

// 数据库连接配置
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "booking_db";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) die("连接失败: " . $conn->connect_error);

// 插入预订数据
foreach ($bookings as $booking) {
    $room = mysqli_real_escape_string($conn, $booking['room']);
    $timeSlot = mysqli_real_escape_string($conn, $booking['timeSlot']);
    $sql = "INSERT INTO bookings (room, time_slot) VALUES ('$room', '$timeSlot')";
    $conn->query($sql);
}

$conn->close();
echo json_encode(['success' => true]);
?>

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