Estoy creando un programa de inventario con codeigniter 4 y me encuentro en la parte de eliminar productos. Mi problema viene a la hora de presionar el botón eliminar que en el html se encuentra dentro de un formulario, ya que intento capturar el evento submit y aplicarle un preventDefault(), pero por una razón que llevo horas intentando entender, no se aplica el preventDefault() y la página se redirige a la url para eliminar.
HTML donde se encuentra el formulario
<?php foreach ($inventary as $inv) : ?>
<tr>
<td scope="row"><?= $inv["SKUProduct"]; ?></td>
<td><?= $inv["productName"]; ?></td>
<td><?= $inv["categoryName"]; ?></td>
<td><?= $inv["productDescription"]; ?></td>
<td><?= $inv["productPrice"]; ?></td>
<td>
<form action="<?php echo route_to('eliminarProducto',$inv['SKUProduct']); ?>" id="formDel" method="POST">
<input type="submit" name="<?= $inv['SKUProduct'] ?>" id="inputSubmitDel" value="Eliminar">
</form>
<a href="<?php echo route_to('modificarProducto', $inv['idProduct']) ?>">Modificar</a>
</td>
</tr>
<?php endforeach; ?>
Código JS, están los dos addeventlistener, el primero si funciona y corresponde al formulario de ingreso de productos, mientras que el segundo no funciona y lo he intentado con el form usando el evento "submit" y con el botón del form usando el evento click
window.addEventListener('load', () => {
//Evento submit para el formulario de addProduct
formAddProduct.addEventListener('submit', (e) => {
e.preventDefault();
});
console.log(inputSubmitDel);
inputSubmitDel.addEventListener('click', (event)=> {
event.preventDefault();
alert("hola");
});
});