0

comento que hace muchísimo tiempo tengo una duda y creo que es tiempo de solucionarla, por lo que solicito ayuda a ustedes.

Habitualmente cuando uno hace una consulta a una base de datos los lista dentro de una tabla. Ejemplo:

<table class="table table-hover v-middle mb-0">
        <thead>
            <tr>
                <th class="border-0">FECHA</th>
                <th class="border-0" colspan="2">HORA</th>
                <!-- <th class="border-0">ACCIÓN</th> -->
            </tr>
        </thead>
        <tbody>
            <?php foreach ($listadoHoras as $horas) { ?>
                <tr>
                    <td><?= $horas['FECHA']; ?></td>
                    <td><?= $horas['HORA']; ?></td>
                    <td>
                        <form action="paginaAccion.php" method="post">
                            <input type="text" name="identificador" id="" value="<?= $horas['ID_RESERVAS']; ?>">
                            <input type="text" name="estado" id="" value="<?= $horas['ESTADO']; ?>">
                            <button type="submit">Enviar</button>
                        </form>
                    </td>
                </tr>
            <?php } ?>
        </tbody>
    </table>

En mi caso, la mayoría de las veces asigno una acción a un botón y actualmente lo hago dentro de un formulario que se construye en cada iteración del foreach.

Hace un tiempo estoy trabajando con AJAX para hacer de mis sistemas mas dinámicos y necesito que al hacer clic en cualquier botón, se envíen los datos del value al archivo que procesa la información (en este caso a paginaAccion.php) sin refrescar la página. He leído que se puede enviar los datos con onclick en cada botón, pero no se cómo hacerlo.

Cualquier ayuda lo apreciaría muchísimo.

1 respuesta 1

0

si se puede hacer con jQuery.

En este caso asignas un evento al botón de cada fila. Incluso puedes reemplazar el botón por un icono sobre un enlace y este enlace le asignas un nombre de clase para que apuntes el evento hacia el nombre de la clase y con los atributos del enlace puedas obtener el id y otros datos.

Te dejo un ejemplo básico:

$(document).ready(function() {

  $('.btnEnviar').on('click', function() {
    let id = $(this).attr('data-id');
    
    //Aquí iria tu código AJAX enviando el ID
    alert('Enviando con AJAX el ID ' + id);
    
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Teléfono</th>
<th>Acción</th>
</tr>
<tr>
  <td>1</td>
  <td>Alex</td>
  <td>123456789</td>
  <td>
  <a href="javascript:;" class="btnEnviar" data-id="1">
  Enviar
  </a>
  </td>
</tr>
<tr>
  <td>1</td>
  <td>Alex</td>
  <td>123456789</td>
  <td>
  <a href="javascript:;" class="btnEnviar" data-id="2">
  Enviar
  </a>
  </td>
</tr>
</table>

Espero sea de ayuda. Saludos.

1
  • Cómo realizar lo mismo pero desde una tabla obtenida dinámicamente con AJAX. Es decir, tengo implementado un input y un botón que me ejecuta una búsqueda (sin refrescar la página con ajax) y el resultado es una tabla como en el ejemplo anterior. Tu ejemplo me funciona perfectamente al cargar la página, pero no si lo aplico en la tabla obtenida como respuesta del ajax.
    – Marcos Esp
    Commented el 19 feb. 2023 a las 22:08

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.