Estoy representando el formulario a continuación, y debajo tengo un script. Cuando cargo la página, escribo el correo electrónico y la contraseña, luego envío, parece que simplemente vuelve a cargar la página (independientemente de las credenciales).
Cuando escribo el correo electrónico y la contraseña, y luego ejecuto la función en la consola de desarrollo escribiendo loginUser() , se ejecuta como se esperaba y, si las credenciales son correctas, me redirige como debería. Si las credenciales son incorrectas, se activan los eventos de alerta.
He puesto puntos de interrupción, y al "enviar" obtiene el correo electrónico y la contraseña que están en el formulario, pero luego parece volver al inicio de la función (independientemente de las credenciales).
let form = document.getElementById('loginform'); form.addEventListener('submit', loginUser); function loginUser() { let email = document.getElementById('email').value; let password = document.getElementById('password').value; firebase.auth().signInWithEmailAndPassword(email, password).then(() => { window.location.href = "/"; }).catch(error => { console.log(error) let errorCode = error.code; let errorMessage = error.message; if (errorCode == 'auth/wrong-password') { window.alert('Entered password was incorrect.'); } else if (errorCode == 'auth/user-not-found') { window.alert('Entered email is invalid.'); } else { window.alert('Please check your login credentials.'); } }); }; firebase.auth().onAuthStateChanged(user => { if (user) { console.log(user) user.getIdToken().then(function(token) { //save the token in a cookie document.cookie = "token=" + token; }); } else { console.log("What up dude?"); } }); <form id="loginform" action="" method="post"> <div class="form-group"> <label for="email">Email</label> <input class="form-control" id="email" name="email" required="required" type="text" value=""> </div> <div class="form-group"> <label for="password">Password</label> <input class="form-control" id="password" name="password" required="required" type="password" value=""> </div> <div class="form-group"> <input class="btn btn-primary" id="submit" name="submit" type="submit" value="Login"> </div> </form>Es imperativo ELIMINAR o RENOMBRAR id="submit" name="submit"
Llamar a cualquier cosa enviar en un formulario oculta el método de envío
Luego agregue preventDefault() para detener el envío:
function loginUser(e) { e.preventDefault()