0

Estoy realizando un formulario de reservas de canchas deportivas. Estoy tratando de que después de que se realice el formulario muestre en pantalla un sweet alert luego de que se realice la consulta y si es correcta la consulta muestra un reserva exitosa con el sweet alert y de la misma forma si hubo un error.

Adjunto el codigo del controlador:

    <?php

//Incluimos y requerimos el archivo de la conexión a la base de datos de sportreserve

require_once '../includes/db.php';
include '../includes/scripts.php';


//Verificamos si el formulario ha sido enviado

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    //Obtenemos los datos del formulario

    $nombre = $conexion->real_escape_string($_POST["nombre"]);
    $email = $conexion->real_escape_string($_POST["email"]);
    $telefono = $conexion->real_escape_string($_POST["telefono"]);
    $cancha = $conexion->real_escape_string($_POST["cancha"]);
    $fecha = $conexion->real_escape_string($_POST["fecha"]);
    $hora = $conexion->real_escape_string($_POST["hora"]);

    //Realizamos la consulta sql para insertar los datos en la base de datos

    $sql = "INSERT INTO reservas (nombre, email, telefono, cancha, fecha, hora) VALUES ('$nombre', '$email', '$telefono', '$cancha', '$fecha', '$hora')";

    //Ejecutamos la consulta

    if ($conexion->query($sql) == TRUE) {
        echo '<script>
        Swal.fire({
            icon: "success",
            title: "Reserva exitosa",
            text: "Gracias por su reserva!",
            confirmButtonText: "Ok"
        }); 
        </script>';
    } else {
        echo '<script>
        Swal.fire({
            icon: "error",
            title: "Error",
            text: "No se pudo realizar la reserva",
            confirmButtonText: "Ok"
        }); 
        </script>';
    }

    //Cerramos y finalizamos la consulta

    $conexion->close();
}

Y a su vez, adjunto el codigo de mi formulario

<?php include('../Sport-Reserve/includes/db.php') ?>


<div class="container mt-5">
    <div class="form-container mx-auto" style="max-width: 600px;">
        <h2 class="text-center mb-4">Reserva de Canchas Deportivas</h2>
        <form action="/Sport-Reserve/includes/reservasController.php" method="POST">
            <div class="mb-3">
                <label for="fullName" class="form-label">Nombre completo</label>
                <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Ingrese su nombre completo" required>
            </div>

            <div class="mb-3">
                <label for="email" class="form-label">Correo electrónico</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="Ingrese su correo electrónico" required>
            </div>

            <div class="mb-3">
                <label for="phone" class="form-label">Teléfono</label>
                <input type="tel" class="form-control" id="telefono" name="telefono" placeholder="Ingrese su número de teléfono" required>
            </div>

            <div class="mb-3">
                <label for="selectCourt" class="form-label">Seleccionar cancha</label>
                <select class="form-select" id="cancha" name="cancha" required>
                    <option selected disabled>Seleccione una cancha</option>
                    <option value="futbol">Fútbol</option>
                    <option value="voley">Vóley Playa</option>
                    <option value="basket">Baloncesto</option>
                    <option value="tenis">Tenis</option>
                </select>
            </div>

            <div class="mb-3">
                <label for="reservationDate" class="form-label">Fecha de la reserva</label>
                <input type="date" class="form-control" id="fecha" name="fecha" required>
            </div>

            <div class="mb-3">
                <label for="reservationTime" class="form-label">Hora de la reserva</label>
                <input type="time" class="form-control" id="hora" name="hora" required>
            </div>

            <button type="submit" class="btn btn-primary w-100">Reservar</button>
        </form>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>

Agradecería con el alma que me pudieran ayudar con esta confusión, no se si realmente estoy realizando bien el include del archivo scripts.php...

1
  • prueba colocando el CDN de sweetalert2 antes de <?php include('../Sport-Reserve/includes/db.php') ?>, ya que estas llamando un Swal antes de importar sweetalert2 Commented el 9 sept. a las 4:48

1 respuesta 1

0

Antes de todo debes incluir el CDN de SweetAlert!

function saludar(){
    Swal.fire({
        icon: "success",
        title: "Hola!",
        text: "Me veo bien, ¿Verdad?"
    });
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<div class="container">
    <button class="btn btn-lg btn-primary" onclick="saludar();">Saludar</button>
</div>

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.