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
    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
    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
    el 2 ago. 2022 a las 22:34
  • Entiendo, muchísimas gracias por explicarlo, @Pipe.
    – Tupi
    el 3 ago. 2022 a las 10:47

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.