0

estoy validando una alerta con sweetalert2 para preguntar si desea eliminar si o no, el problema ocurre cuando al momento de presionar el boton de eliminar envía la accion mediante el método post y actualiza la pagina, entonces la alerta se ve pero se desaparece muy rápido y ya no se puede elegir si desea eliminar si o no. Espero me ayuden gracias.

Mi código es este

function alertDelete() {
  Swal.fire({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Yes, delete it!'
  }).then((result) => {
    if (result.isConfirmed) {
      Swal.fire(
        'Deleted!',
        'Your file has been deleted.',
        'success'
      )
    }
  })
}
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<form method="POST">
  <input type="hidden" name="txtID_Proyects" id="txtID_Proyects" value="<?php echo $libro['id_proyectos'];  ?>" />
  <button class="icon-accion" type="submit" name="accion" value="Seleccionar"><i class="fa-solid fa-pen-to-square"></i> Seleccionar</button>
  <button type="submit" name="accion" value="Borrar" class="icon-accion" onclick="alertDelete()  "><i class="fa-solid fa-delete-left"></i> Borrar</button>
</form>

Acción Borrar con PHP

case "Borrar":
    $sentenciaSQL= $conexion->prepare("SELECT imagen FROM proyectos WHERE id_proyectos=:id_proyectos");
    $sentenciaSQL->bindParam(':id_proyectos',$txtID_Proyects);
    $sentenciaSQL->execute();
    $libro=$sentenciaSQL->fetch(PDO::FETCH_LAZY);

    if (isset($libro["imagen"]) && ($libro["imagen"] != "imagen.jgp")) {
        if (file_exists("imagenes/".$libro["imagen"])) {
            unlink("imagenes/".$libro["imagen"]);
        }
    }

    $sentenciaSQL= $conexion->prepare("DELETE  FROM proyectos WHERE id_proyectos=:id_proyectos");
    $sentenciaSQL->bindParam(':id_proyectos',$txtID_Proyects);
    $sentenciaSQL->execute();

    print "<script>window.setTimeout(function() { window.location = 'portafolio.php' }, 200);</script>";
    break;

1 respuesta 1

0

@masterguru va por el camino correcto. Lo primero es cambiar el tipo del botón de "submit" a "button", de esa manera no se va a enviar el formulario automáticamente al clickearlo.

El problema es que al transformarlo en un simple botón y enviar el formulario desde JS, el valor del botón ("Borrar") no se envía.

Lo que hice (hay varias formas), fue agregar un input oculto con el valor de la acción a ejecutar. Por defecto lleva el valor de "Seleccionar", que es el valor que tenía el botón "submit". Al presionar el botón de borrar, y confirmada la acción, se cambia el valor de ese input por "Borrar" y luego se envía el formulario.

function alertDelete() {
  Swal.fire({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Yes, delete it!',
  }).then((result) => {
    if (result.isConfirmed) {
      // Muestra el mensaje
      Swal.fire(
        'Deleted!',
        'Your file has been deleted.',
        'success'
      );
      
      // Espera 2 segundos
      window.setTimeout(() => {
        // Cambia el valor del input "accion" a "Borrar"
        document.getElementById('accion').value = 'Borrar';
        
        // Envía el formulario
        document.getElementById('form').submit();
      }, 2000);
    }
  })
}
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<form id="form" method="POST">
  <input type="hidden" name="txtID_Proyects" id="txtID_Proyects" value="<?php echo $libro['id_proyectos']; ?>">

  <input type="hidden" id="accion" name="accion" value="Seleccionar">

  <button type="submit" class="icon-accion">
    <i class="fa-solid fa-pen-to-square"></i> Seleccionar
  </button>

  <button type="button" class="icon-accion" onclick="alertDelete()">
    <i class="fa-solid fa-delete-left"></i> Borrar
  </button>
</form>

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.