Estoy realizando una aplicación con HTML5, CSS3 y JavaScript el cual es un panel administrador.
Actualmente estoy haciendo la parte de generar una orden, por lo que muestro mis productos de la siguiente forma:
Para poder generar la orden con múltiples productos tengo una tabla en la que se van a ir agregando conforme la persona presione el + en las cards. Esta es la tabla:
Mi problema surge cuando quiero agregar los datos de mi producto a mi tabla, ya que los botones ya no tienen el evento asociado. Podrian pensar que simplemente tome el valor desde el elemento, pero estoy trabajando con MYSQL, por lo que queria hacer es pasar el ID del producto por la URL, hacer un select a mi tabla con dicho ID y despues hacer echo en mi tabla mediante JS mediante variables de php, pero con esta event.preventDefault() no puedo realizarlo.
Me gustaria saber si alguien me pudiera ayudar a resolver este problema. Gracias de ante mano.
Por si les sirve este es el código del JS: (muchos de los valores eran de prueba para verificar que JS si agregaba los datos a la tabla, los cuales vienen de un formulario)
<?php foreach($resultado as $producto){?>
<script>
const buttons = document.getElementsByClassName('plus');
for (i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function (event) {
event.preventDefault();
let orderFormData = new FormData(form);
let orderTableRef = document.getElementById("sampleTbl");
let newOrderRowRef = orderTableRef.insertRow(-1);
$("#sampleTbl tr:last-child()").addClass("fila");
let newTypeCellRef = newOrderRowRef.insertCell(0);
newTypeCellRef.textContent = "<?php echo $producto['PrecioCompra_Producto'] ?>";
newTypeCellRef = newOrderRowRef.insertCell(1);
newTypeCellRef.textContent = orderFormData.get("dirOrder");
newTypeCellRef = newOrderRowRef.insertCell(2);
newTypeCellRef.textContent = orderFormData.get("puntosOrder");
newTypeCellRef = newOrderRowRef.insertCell(3);
newTypeCellRef.textContent = orderFormData.get("emailOrder");
let newDeleteCell = newOrderRowRef.insertCell(4);
let deleteButton = document.createElement("button");
$(deleteButton).addClass('btn btn-danger');
deleteButton.textContent = "Eliminar";
newDeleteCell.appendChild(deleteButton);
deleteButton.addEventListener("click", (event) => {
event.target.parentNode.parentNode.remove();
})
form.reset();
}
</script>
<?php }?>