时间戳

首页 > 解决方案 > 从 datepicker 获取值并分配给 php

javascript - 从 datepicker 获取值并分配给 php

问题描述

我有一个带有 1 个输入和 2 个选择的预约表格： 首先：使用 jQuery 输入可以选择一个日期。 第二：选择与美发列表（不相关）。 第三：选择基于日期的可用时间列表。

我一直根据日期进入数据库，所以我的目标是：

当用户选择一个日期时，我的查询会使用可用时间列表填充第三个选择，因此我的查询需要他选择的日期。如何获取所选日期的值并在 php 中使用它进行查询？

HTML/视图：

<h1>Book Reservation</h1>
                <b><p>Select Date:</p></b>
                <input id="datepicker" name="date" width="270" style = "display: block; float: center;" disabled required>

    <script>
        $('#datepicker').datepicker({
            uiLibrary: 'bootstrap'
        });
    </script>

    <?php include "../../Models/appointment/hdquery.php"?>
    <b><p style = "margin-top: 10px; ">Select Hair Dressing :</p></b>
    <select  class="select-css" name = "hairdressing">
     <?php include "../../Models/appointment/populatelisthd.php"?>
     </select>
     <b><p style = "margin-top: 10px;">Select Time:</p></b>
     <?php include "../../Models/appointment/timesquery.php"?>
     <select  class="select-css" name = "times"><
     <?php include "../../Models/appointment/populatelisttimes.php"?>
     </select><p style="margin-top: 10px;">

     <input type="submit" value = "Confirm">

包含中的 hdquery 和 populatelisthd 与我的问题无关，所以我不会显示它们。

时间查询：

<?php
$mysqli = NEW MySQLi('localhost','root','','cappeli');
$result = $mysqli->query("SELECT t.`hour` FROM `times` t LEFT JOIN ( SELECT `time` FROM `reservations` WHERE `date` = '$date' GROUP BY `time` HAVING COUNT(*) > 2) r on r.time = t.`hour` WHERE r.time IS NULL ");
?>

如果您在查询中注意到有一个WHERE date=$date 我想从 datepicker 的输入字段中获取此日期，并且在每次更改时我都需要查询来更新时间。我怎么做？（PS：我有另一个 php 文件来填充它，但我需要结果timesquery来填充 select ）

标签： javascriptphpjqueryhtml

解决方案

每次用户选择日期时，您都需要发出AJAX 请求。为此，您可以使用 datepicker 库的onSelect` 事件。

  1. 首先让我们摆脱timesquery.php和populatelisttimes.php文件：
    <?php include "../../Models/appointment/hdquery.php"?>
    <b><p style = "margin-top: 10px; ">Select Hair Dressing :</p></b>
    <select  class="select-css" name = "hairdressing">
     <?php include "../../Models/appointment/populatelisthd.php"?>
     </select>
     <b><p style = "margin-top: 10px;">Select Time:</p></b>
      <!-- -->
     <select  class="select-css" name = "times">
     <!-- Options will be added here dynamically using jQuery -->
     </select><p style="margin-top: 10px;">

     <input type="submit" value = "Confirm">
  1. 现在让我们听听jQuery中的日期“选择” ：
$('#datepicker').datepicker({
    onSelect: function (date) {
        $.ajax({
            type: "POST",
            url: 'timesquery.php',
            data: {
                'date': date,
            },
        }).done(function (data) {
            $('select[name=times]').html(data);
        }).fail(function () {
            alert('An error has occured.')
        });
    }
});
  1. 最近，让我们打印出文件中的选项 HTML timesquery.php，我相信您的populatelisttimes.php文件会负责打印选项，所以我只包含它：
$date = $_POST['date']; // <====== Here is our date variable, you need to escape this!!!
$mysqli = NEW MySQLi('localhost','root','','cappeli');
$result = $mysqli->query("SELECT t.`hour` FROM `times` t LEFT JOIN ( SELECT `time` FROM `reservations` WHERE `date` = '$date' GROUP BY `time` HAVING COUNT(*) > 2) r on r.time = t.`hour` WHERE r.time IS NULL ");

include __DIR__ . '/populatelisttimes.php';

推荐阅读