0

Hola a todos tengo sistema de citas y necesito quitar las horas que ya no se encuentran disponibles en base de datos segun el dia que seleccione el usuario es decir de 10:00 am - 11:00 am el dia 2024-03-06 se encuentra asignada el usuario puede buscar en los dias siguientes para verificar que este libre y asignarsela pero no logro realizarlo, este es mi codigo javascript actual , llevo rato tratando de buscar una solucion pero siempre se me borra todo el select por mas que trate de que el usuario busque esa hora libre disponible en otro dia del input date pero siempre sale vacio , si pueden ayudarme a verificar el codigo y saber cual es el problema seria increible, en la tabla de base de datos las columnas son time y fecha debo buscar las horas disponibles segun la fecha

 var xhr = new XMLHttpRequest();
            var selectFecha = document.getElementById("fechaInput");
            var selectHoras = document.getElementById("horaInput");
            xhr.open("GET", "consulta.php", true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // Parsea la respuesta JSON
                    var horasRegistradas = JSON.parse(xhr.responseText);

                    // Obtiene la fecha seleccionada por el usuario
                    var fechaSeleccionada = new Date(selectFecha.value);
                    
                    // Itera sobre las opciones del select de horas
                    var options = selectHoras.querySelectorAll("option");
                    options.forEach(function(option) {
                        // Si la opción no es la predeterminada, se verifica si debe eliminarse
                        if (option.value !== "") {
                            // Obtiene la hora de la opción y la convierte en un objeto Date
                            var horaOption = new Date(fechaSeleccionada.toDateString() + " " + option.value);
                            
                            // Itera sobre las horas registradas
                            var ocupado = false;
                            horasRegistradas.forEach(function(registro) {
                                var fechaHoraRegistrada = new Date(registro.fecha + 'T' + registro.time);
                                if (fechaHoraRegistrada.getTime() === horaOption.getTime()) {
                                    // La hora está ocupada, se marca como ocupado y se sale del bucle
                                    ocupado = true;
                                    return;
                                }
                            });
                            
                            // Si la hora no está ocupada, se elimina la opción
                            if (!ocupado) {
                                option.remove();
                            }
                        }
                    });
                }
            };
            xhr.send();

y este es mi codigo php actual

<?php
// Realiza la conexión a la base de datos
$conexion = new mysqli("localhost", "root", "", "suit");

// Verifica la conexión
if ($conexion->connect_error) {
    die("Error en la conexión: " . $conexion->connect_error);
}

// Obtener la fecha seleccionada enviada por el cliente
$fechaSeleccionada = $_GET['fechaSeleccionada'];

// Consulta SQL para obtener las horas disponibles para la fecha seleccionada
$sql = "SELECT time FROM quotes WHERE fecha = '$fechaSeleccionada'";

// Ejecuta la consulta
$resultado = $conexion->query($sql);

// Array para almacenar las horas disponibles
$horasDisponibles = array();

// Obtiene las horas disponibles y las almacena en el array
while ($fila = $resultado->fetch_assoc()) {
    $horasDisponibles[] = $fila['time'];
}

// Retorna el array como JSON
echo json_encode($horasDisponibles);

// Cierra la conexión
$conexion->close();
?>

1 respuesta 1

0

Por lo que veo, el problema puede ser en la manera en cómo estás enviando la fecha seleccionada desde JavaScript y cómo la estás recibiendo en PHP.

En el código JavaScript, estás intentando obtener la fecha seleccionada del elemento con ID fechaInput, pero no estás enviándola como parámetro en tu solicitud GET. Debes asegurarte de enviar la fecha seleccionada como un parámetro en tu solicitud GET.

Aparte, en tu PHP, estás intentando obtener la fecha seleccionada del parámetro $_GET['fechaSeleccionada'], pero no estás enviando ese parámetro desde JavaScript.

Puedes intentar esto:

Tu código JavaScript:

var xhr = new XMLHttpRequest();
var selectFecha = document.getElementById("fechaInput");
var selectHoras = document.getElementById("horaInput");
var fechaSeleccionada = selectFecha.value; // Obtener la fecha seleccionada
xhr.open("GET", "consulta.php?fechaSeleccionada=" + fechaSeleccionada, true); // Enviar la fecha seleccionada como parámetro
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // Resto del código...
    }
};
xhr.send();

y en tu codigo PHP:

<?php
// Realiza la conexión a la base de datos
$conexion = new mysqli("localhost", "root", "", "suit");

// Verifica la conexión
if ($conexion->connect_error) {
    die("Error en la conexión: " . $conexion->connect_error);
}

// Obtener la fecha seleccionada enviada por el cliente
$fechaSeleccionada = $_GET['fechaSeleccionada'];

// Consulta SQL para obtener las horas disponibles para la fecha seleccionada
$sql = "SELECT time FROM quotes WHERE fecha = '$fechaSeleccionada'";

// Ejecuta la consulta
$resultado = $conexion->query($sql);

// Array para almacenar las horas disponibles
$horasDisponibles = array();

// Obtiene las horas disponibles y las almacena en el array
while ($fila = $resultado->fetch_assoc()) {
    $horasDisponibles[] = $fila['time'];
}

// Retorna el array como JSON
echo json_encode($horasDisponibles);

// Cierra la conexión
$conexion->close();
?>

Espero ayudarte con eso.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.