Espero puedan apoyarme. Estoy tratando de hacer que un botón tome un ID conforme a lo mostrado en consulta, adjunto código para definir más la problemática.
Esta es mi tabla donde en una columna tengo mi botón el cual abre un modal donde debería mostrarme el material que ese botón traiga, todo esto lo mando por ajax pero siempre me toma solo el primer valor de la consulta.
<table class="table table-striped table-dark" id="mydatatable">
<thead>
<tr class="encabezadoTabla">
<th>Materiales</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT TOP 20 * FROM [BDG_PORTALPEDIDOS].[dbo].[tabla_infoPedido] WHERE REQ_DATE = '" . $fechaActual . "' ORDER BY id DESC";
$result = sqlsrv_query($conn, $sql);
while ($row = sqlsrv_fetch_array($result)) {
?>
<tr>
<td>
<form method="POST" onsubmit="return enviar();">
<button type="submit" value="<?= $row['PEDIDOP'] ?>" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" name="materialesPedido" id="materialesPedido">
</form>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
Este es el código AJAX
function enviar() {
var materialesPedido = document.getElementById('materialesPedido').value;
var dataen = 'materialesPedido=' + materialesPedido;
$.ajax({
type: 'POST',
url: 'materiales.php',
data: dataen,
success: function (resp) {
$("#respa").html(resp);
}
});
return false;
}
Y este mi código PHP donde mando los datos por POST
$_materiales = $_POST['materialesPedido'];
// Muestra el pedido del portal
$sqlM = "SELECT DISTINCT(IDPEDIDO), MATERIAL FROM [BDG_PORTALPEDIDOS].[dbo].[tabla_infoMaterial] WHERE IDPEDIDO = '" . $_materiales . "'";
$resultM = sqlsrv_query($conn, $sqlM);
while ($rowM = sqlsrv_fetch_array($resultM)) {
echo $rowM[1] . '<br>';
}
MODAL
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="exampleModalLabel">Materiales</h2>
</div>
<div class="modal-body">
<p id="respa"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>