audiencias-agregarau-js

<div class="container">

  <div class="row">

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

      <h2>Formulario</h2>

      <form id="form_video">

        <div class="row mb-3">

          <div class="col">

            <label for="carpeta" class="form-label">Carpeta:</label>

            <input type="text" class="form-control" name="carpeta" id="carpeta" onchange="autocompletarNombre()">

          </div>

          <div class="col">

            <label for="fecha" class="form-label">Fecha:</label>

            <!-- Cambiado a date para seleccionar solo la fecha -->

            <input type="date" class="form-control"  name="fecha"id="fecha" onchange="autocompletarNombre()">

          </div>

          <div class="col">

    <label for="hora" class="form-label">Hora (HH:MM):</label>

    <!-- Nuevo input para ingresar la hora -->

    <input type="time" class="form-control" name="hora"  id="hora" onchange="autocompletarNombre()">

</div>

        </div>

        <div class="row mb-3">

          <div class="col">

            <label for="nombre_archivo" class="form-label">Nombre de Archivo:</label>

            <!-- Agregado el atributo onchange para llenar automáticamente el campo de nombre del archivo -->

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

          </div>

          <div class="col">

            <label for="juez" class="form-label">Juez:</label>

            <!-- Cambiado el ID del input -->

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

          </div>

        </div>

        <div class="row mb-3">

          <div class="col">

            <label for="asistente" class="form-label">Asistente de sala:</label>

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

          </div>

          <div class="col">

            <label for="encargado" class="form-label">Encargado:</label>

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

          </div>

        </div>

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

      </form>

    </div>

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

      <h2>Tabla de Carga</h2>

      <table class="table">

        <thead>

          <tr>

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

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

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

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

            <th scope="col">Asistente de Sala</th>

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

          </tr>

        </thead>

        <!-- Cambiado el ID de la tabla-body -->

        <tbody id="tabla-body">

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

          <tr>

            <td colspan="6">No hay datos cargados aún.</td>

          </tr>

        </tbody>

      </table>

    </div>

  </div>

</div>

<!-- Bootstrap JS -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<script>

  document.addEventListener('DOMContentLoaded', function () {

    const formulario = document.querySelector('form_video');

    formulario.addEventListener('submit', function (event) {

      event.preventDefault(); // Evitar que el formulario se envíe normalmente

     

      // Crear un objeto FormData para enviar los datos del formulario

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

      const formData = new FormData(formulario);

     

      // Enviar los datos al servidor utilizando Fetch API

      fetch('/guardar_registro.php', {

        method: 'POST',

        body: formData

      })

      .then(response => response.json())

      .then(data => {

        // Actualizar los datos de la tabla

        actualizarTabla(data);

      })

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

    });

    // Función para actualizar los datos de la tabla

    function actualizarTabla(data) {

      const tablaBody = document.getElementById('tabla-body');

      // Limpiar la tabla

      tablaBody.innerHTML = '';

      // Agregar los nuevos datos a la tabla

      data.forEach(registro => {

        const newRow = tablaBody.insertRow();

        newRow.innerHTML = `

          <td>${registro.carpeta}</td>

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

          <td>${registro.nombre_video}</td>

          <td>${registro.nombre_archivo}</td>

          <td>${registro.asistente}</td>

          <td>${registro.encargado}</td>

        `;

      });

    }

  });

// Función para llenar automáticamente el campo de nombre del archivo con la combinación de carpeta, fecha y hora

function autocompletarNombre() {

  const carpetaInput = document.getElementById('carpeta');

  const fechaInput = document.getElementById('fecha');

  const horaInput = document.getElementById('hora');

  const nombreArchivoInput = document.getElementById('nombre_archivo');

  // Obtener los valores de los campos

  const carpeta = carpetaInput.value;

  const fecha = fechaInput.value;

  const hora = horaInput.value;

  // Reemplazar el caracter '/' por '-' en el valor de la carpeta

  const carpetaFormateada = carpeta.replace(/\//g, '-');

  // Reemplazar el caracter ':' por '-' en el valor de la hora

  const horaFormateada = hora.replace(/:/g, '-');

  // Combinar los valores formateados

  const nombreArchivo = carpetaFormateada + '_' + fecha + '_' + horaFormateada;

  // Asignar el valor al campo nombre_archivo

  nombreArchivoInput.value = nombreArchivo;

}

</script>