1

Tengo un formulario de login que se supone que si no están llenos los campos de user y pass, debe lanzar un sweetalert2 en donde le indica al usuario lo que le falta, sin embargo; como la consulta está hecha en php se brinca el sweetalert2 que solo dura menos de un segundo en pantalla y de inmediato refresca la página. Cómo puedo detener que se refresque la página y se quede el sweetalert2 hasta que el usuario lo qiute con el botón correspondiente???

document.getElementById('signinBtn').addEventListener('click', ()=>{
  let inputSignIn = document.getElementById("signin").value;
  let inputPass = document.getElementById("signPass").value;
  if ((inputSignIn == "") && (inputPass == "")){
    swalfire();
  }else if((inputSignIn != "") && (inputPass == "")){
    swalfire();
    document.getElementById("signin").value = '';
    return true;
  }else if((inputSignIn == "") && (inputPass != "")){
    swalfire();
    document.getElementById("signPass").value = '';
  }else if((inputSignIn != "") && (inputPass != "")){
    
  }
});
        <div class="col align-center flex-col sign-in">
          <div class="form-wrapper align-center">
            <div class="form sign-in">
              <form method="post">
              <div class="input-group">
                <i class="fa fa-user"></i>
                <input id="signin" name="signin" type="text" placeholder="Username" />
              </div>
              <div class="input-group">
                <i class="fa fa-lock"></i>
                <input id="signPass" name="signPass" type="password" placeholder="Password" />
                <i class="fas fa-eye-slash" id="togglePassword" style="margin-left: 84%; cursor:pointer"></i>
              </div>
              <button id="signinBtn" name="signinBtn">Sign in</button>
              </form>
              <p>
                <b id="modal-sweetAlert" onclick="return forgotYourPass()">Forgot password?</b>
              </p>
              <p>
                <span> Don't have an account? </span>
                <b id="sign-up">Sign up here</b>
              </p>
            </div>
          </div>

<?php 
      require_once "model/conexion.php";
      $conn = Conexion::conectardb();

     session_start();
    if (isset($_POST['signinBtn'])) {
        #echo"estoy aqui";
        $user = $_POST['signin'];
        $pasw = $_POST['signPass'];
        $_SESSION['signin'] = $user;
        # echo''.$user;

  $consulta = $conn->prepare("SELECT t1.[Pk_User],t1.[ID_User],[email],t1[passw],t1[ID_Profile]
                                  ,t1.[ID_Company_Codes],t1.[Activo_Inactivo],t2.[User_ID]
                                  FROM [DBPeople_Cost].[dbo].[ty_access] t1
                                  INNER JOIN [ty_usuarios] t2 ON t1.[ID_User]=t2.[ID_User]
                                  WHERE t2.[User_ID] = '$user' and t1.[passw] = '$pasw' AND t1. 
   [Activo_Inactivo]=1");
      $consulta->execute();
     $datos = $consulta->fetchAll(PDO::FETCH_ASSOC);
     #var_dump($datos);
     if ($datos) {
        header("Location:index.php");
     }
   }

   ?>

1
  • php se ejecuta de lado del servidor, poco puedes controlar con php en el lado del javascript ... esta pregunta es netamente javascript...
    – user46896
    Commented el 2 ago. 2022 a las 19:36

1 respuesta 1

1

Usa e.preventDefault() y return false al final de tu función, y añade la e a los parametros de la función:

document.getElementById('signinBtn').addEventListener('click', (e)=>{
  e.preventDefault();

  let inputSignIn = document.getElementById("signin").value;
  let inputPass = document.getElementById("signPass").value;
  if ((inputSignIn == "") && (inputPass == "")){
    swalfire();
  }else if((inputSignIn != "") && (inputPass == "")){
    swalfire();
    document.getElementById("signin").value = '';
  }else if((inputSignIn == "") && (inputPass != "")){
    swalfire();
    document.getElementById("signPass").value = '';
  }else if((inputSignIn != "") && (inputPass != "")){
    
  }

  
  return false;
});

Asi evitas que se ejecute la acción por defecto que tiene el navegador para ese botón.

3
  • Saludos, @Pipe. Conocía el e.preventDefault(), de hecho, si no lo hubieras dicho lo habría dicho yo. Pero, ¿para qué hace falta el return false?
    – Tupi
    Commented el 2 ago. 2022 a las 19:43
  • El return false en ciertos casos se usa para prevenir la propagación del evento click a otros elementos del DOM, similar a e.stopPropagation()
    – Pipe
    Commented el 2 ago. 2022 a las 22:34
  • Entiendo, muchísimas gracias por explicarlo, @Pipe.
    – Tupi
    Commented el 3 ago. 2022 a las 10:47

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.