0

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");
    });
});

Así es la apariencia de la tabla Apariencia actual de la tabla

2
  • Para empezar no debes usar los mismos id= en un bucle, debes diferenciarlos de algun modo. Aquí respondí un problema similar: es.stackoverflow.com/questions/510745/…. Luego, en tu javascript, debes recorrer todos los submit, y no solo el primero que encuentre, tal como lo tienes ahora, mediante un querySelectorAll por ejemplo.
    – masterguru
    Commented el 30 ene. 2022 a las 13:58
  • Otra cosa que haces mal es poner lo del formAddProduct allí, pues diria que es lo que impide que te funcione ni tan solo una vez el boton eliminar. Si lo desactivas al menos el primero lo coge bien, tal como puedes ver aqui: jsfiddle.net/w097ahdv (funciona mal porque da un error de javascript de objeto no encontrado y luego deja de ejecutarse el resto del javascript)
    – masterguru
    Commented el 30 ene. 2022 a las 14:09

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.