0

Al entregar el formulario necesito que la pagina no se actualice y así ejecute el codigo de inicio de sesion mediante el fetch, hasta donde tenia entendido preventDefault() cumple esta función... pero simplemente no lo hace. Estoy haciendo algo mal?

codigo HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Janfa-Login</title>
    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="css/Login.css">
</head>
<body>
    <div class="container-form">
        <form class="login" id="login">
            <h2>Log in</h2>
            <label>Documento de identidad</label>
            <label id="error">Usuario y/o contraseña incorrectos</label>
            <input type="text" id="cedula" placeholder="Documento de identidad">
            <label>Contraseña</label>
            <input type="password" id="password" placeholder="Contraseña">
            <input type="submit" name="">

            <a href="#">Olvidé mi contraseña</a>
        </form>
    </div>
</body>
<script type="text/javascript" src="js/login.js"></script>
</html>

codigo javascript: EDIT:

window.onload= () => {
const loginForm= document.getElementById('login')
loginForm.onSubmit = (e) =>{
    e.preventDefault()
    e.stopPropagation()
    const cedula = document.getElementById('cedula').value
    const password = document.getElementById('password').value

    fetch('https://janfa.gharsnull.now.sh/api/auth/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({cedula, password})
    })
}

}       
4
  • Despues de preventDefault() intenta con e.stopPropagation()
    – Legna
    Commented el 16 may. 2020 a las 20:10
  • @Angel acabo de hacerlo y sigue sin funcionar Commented el 16 may. 2020 a las 20:13
  • 2
    Es un error de syntax , solo debes cambiar loginForm.onSubmit por loginForm.onsubmit el error esta en la S mayúscula. Saludos
    – Daniel
    Commented el 16 may. 2020 a las 20:32
  • @Daniel Oh dios, muchas gracias. Nunca me hubiera imaginado que eso generaba error ya que ambos metodos los recibe el navegador Commented el 16 may. 2020 a las 20:34

1 respuesta 1

3

El problema es un typo en el nombre del método onSubmit. El nombre correcto es onsubmit. Aquí puedes revisar su documentación:

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onsubmit

Aquí te dejo una prueba que hice modificando tu código para que el JS imprimiera los valores de cedula y password en la consola, para verificar que el preventDefault funciona con el cambio de nombre del método a onsubmit:

<!DOCTYPE html>
<html>
<head>
    <title>Janfa-Login</title>
    <meta charset="utf-8">
</head>
<body>
    <div class="container-form">
        <form class="login" id="login">
            <h2>Log in</h2>
            <label>Documento de identidad</label>
            <label id="error">Usuario y/o contraseña incorrectos</label>
            <input type="text" id="cedula" placeholder="Documento de identidad">
            <label>Contraseña</label>
            <input type="password" id="password" placeholder="Contraseña">
            <input type="submit" name="">

            <a href="#">Olvidé mi contraseña</a>
        </form>
    </div>
</body>
<script type="text/javascript" src="js/login.js"></script>
</html>
window.onload = () => {
  const login = document.getElementById('login');

  login.onsubmit = (e) => {
    e.preventDefault();

    const cedula = document.getElementById('cedula').value;
    const password = document.getElementById('password').value;

    console.log(cedula, password);
  }

};
2
  • por convencion.... los elementos HTML se le antecede un $, ejemplo const $login =... Commented el 16 may. 2020 a las 22:48
  • En lo personal, prefiero utilizar esa convención cuando declaro una variable que almacenará un objecto jQuery. Por ejemplo const $login = $('#login');
    – Jorge Soto
    Commented el 17 may. 2020 a las 19:18

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.