AGENDA-Profesionistas-js

 <div class="container">

  <div class="row">

    <div class="col-md-12">

      <form id="formulario">

        <div class="mb-6 row mt-3">

        <div class="col-1">

        <label for="nombre" class="form-label">Nombre:</label>

        </div>

            <div class="col">

                <input type="text" class="form-control" id="nombre" name="nombre" required>

            </div>

            <div class="col-1">

            <label for="correo" class="form-label">Correo:</label>

            </div>

            <div class="col">

                <input type="text" class="form-control" name="correo" id="correo">

            </div>

           

        </div>  

        <div class="mb-6 row">

          <div class="col">

            <label for="celular" class="form-label">Celular:</label>

            <input type="tel" class="form-control" name="celular" id="celular" >

          </div>

          <div class="col">

            <label for="tel_oficina" class="form-label">Tel. Oficina:</label>

            <input type="tel" class="form-control" name="tel_oficina" id="tel_oficina">

          </div>

          <div class="col">

            <label for="horario_disponible" class="form-label">Horario Disponible:</label>

            <input type="text" class="form-control" name="horario_disponible" id="horario_disponible">

          </div>

 

          <div class="col">

            <label for="fecha_registro" class="form-label">Fecha de Registro:</label>

            <input type="date" class="form-control" name="fecha_registro" id="fecha_registro" required>

          </div>

          <div class="col">

            <label for="cedula_profesional" class="form-label">Cédula Profesional:</label>

            <input type="text" class="form-control" name="cedula_profesional"  id="cedula_profesional">

            </div>

        </div>

        <div class="mb-6 row t-3">

            <div class="col">

            <label for="exampleFormControlTextarea1" class="form-label">Domicilio</label>

  <textarea class="form-control" name="domicilio"  id="domicilio" rows="3"></textarea>

            </div>

     

            <div class="col-1 text-center"> <!-- Aquí se centra el botón -->

             <button type="submit" class="btn btn-primary mt-5">Enviar</button>

            </div>

        </div>  

      </form>

    </div>

  <div class="row">

    <div class="col-md-12">

      <table class="table" id="tabla-datos">

        <thead>

          <tr>

          <th scope="col">id</th>

            <th scope="col">Nombre</th>

            <th scope="col">correo</th>

            <th scope="col">Celular</th>

            <th scope="col">Tel</th>

            <th scope="col">Horario</th>

            <th scope="col">Fecha</th>

            <th scope="col">Cedula</th>

            <th scope="col">Domicilio</th>

          </tr>

        </thead>

        <tbody class="tabla">

          <!-- Aquí se mostrarán los datos cargados -->

        </tbody>

      </table>

    </div>

  </div>

</div>

<!-- Bootstrap JS -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

<!-- Agrega la librería de SweetAlert -->

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

<script>

   //Evento sbmit que activa el envio del formulario

  document.getElementById("formulario").addEventListener("submit", function(event) {

    event.preventDefault(); // Evita que el formulario se envíe automáticamente

    // Obtiene los valores de los campos del formulario

    var formData = new FormData(document.getElementById("formulario"));

    console.log("formData", [...formData.entries()]);

    // Envía los datos al servidor utilizando Fetch API

    fetch("http://localhost/3-MVC-SITE-v5-SOLICITUDES/EJERCICIOS-COMPONENTES/profesionistas.php", {

      method: "POST",

      body: formData

    })

    .then(response => response.text())

    .then(data => {

      console.log(data); // Muestra la respuesta del servidor en la consola

      // Si la respuesta del servidor es exitosa, actualiza la tabla

    traer();

    Swal.fire({

          title: '¡Guardado!',

          text: 'Los datos se han guardado correctamente.',

          icon: 'success',

          confirmButtonText: 'OK'

        });

        // Resetear el formulario

        document.getElementById("formulario").reset();

    })

    .catch(error => console.error("Error:", error));

  });

  // Llama a la función para actualizar la tabla cuando se carga la página

 

  window.addEventListener("load",traer);

  //traer();

         

   function traer() {

    fetch("http://localhost/3-MVC-SITE-v5-SOLICITUDES/EJERCICIOS-COMPONENTES/profesionistas.php")

        .then(res => res.json())

        .then(datos => {

            console.log(datos);

           mostrarTabla(datos);

        })

        .catch(error => console.error("Error:", error));

    }

    function mostrarTabla(datos) {

    let tbody = document.querySelector(".tabla"); // Cambia "#tabla" por ".tabla"

    tbody.innerHTML = '';

    for (let valor of datos) {

        tbody.innerHTML += `  

        <tr>

            <td>${valor.id}</td>

            <td>${valor.nombre}</td>

            <td>${valor.correo}</td>

            <td>${valor.celular}</td>

            <td>${valor.tel}</td>

            <td>${valor.horario}</td>

            <td>${valor.fecha}</td>

            <td>${valor.cedula}</td>

            <td>${valor.domicilio}</td>  

        </tr>`;

    }

}

</script>