I am building an HTML page and want to redirect the 'client' if the user and password typed are correct

Asked

Viewed 151 times

2

I have 3 input, one type email and another type password:

              <input id="usuario" type="email" placeholder="Usuário">

              <input id="senha" type="password" placeholder="Senha">

And a Ubmit which will validate:

<input id="logar" type="submit" value="Entrar" class="enviar" onclick="return Redirecionar()">

I am trying to validate using a js file:

var botaoAdicionar = document.querySelector("#logar");
        botaoAdicionar.addEventListener("click", function(event) {

        var capturando = "";
        function Redirecionar() {

        capturando = document.getElementById('usuaario').value;
        capturando = document.getElementById('senhaa').value;

        document.getElementById('capturando').innerHTML = capturando;

        if (usuario == "[email protected]" && senha == "123") {
        function Redirecionar() {
        window.location.href="menu.html";

            }
        }

        else{
            alert("Dados incorretos! Por favor, tente novamente.");

            }   
        }
 });

However the page just updates, already in several ways and I can’t :/ So who can help me :) I appreciate

javascript html

  • Adds event.preventDefault(); at the beginning of the click function, to avoid updating the page. You can also change the type="submit" for type="button".

  • You are calling a function that is within the function of the click event and declared the same function 2 times, one inside the other. In addition to other problems, such as declaring the variable capturando 2 times with different values. You have to redo the code.

  • Oh yes, I had already put this line, but I ended up removing it unintentionally as I tried. Unfortunately this is not the problem.

  • Also has typos in "usuaario" and "senhaa".

  • I get it, so it’s unnecessary for me to use two functions for this case, right?

  • Yes, they were already correct in the original file, as I said I had already made several modifications and I ended up sending an old one without the proper corrections.

  • 1

    If you add the Event Listener no JS, does not make sense the onclick="return Redirecionar()" on the button. Also you are creating functions within the callback that are not used. Need to give a studied in JS scopes and events, here at Sopt has enough related content

  • Thank you !!!!! worked out well

Show 3 more comments

1 answer

2


Changing the type to button, and only with EventListener, you can already call the function needed for this validation.

You can try something like this:

var botaoAdicionar = document.querySelector("#logar");

botaoAdicionar.addEventListener("click", function(event) {

   var campoUsuario = document.getElementById('usuario').value;
   var campoSenha = document.getElementById('senha').value;
          
   if (campoUsuario == "[email protected]" && campoSenha == "123") 
       window.location.href="menu.html";
   else
       alert("Dados incorretos! Por favor, tente novamente.");     
});
<input id="usuario" type="email" placeholder="Usuário">

<input id="senha" type="password" placeholder="Senha">

<input id="logar" type="button" value="Entrar" class="enviar">

  • For new programmer here at Stack, perfect answer !

  • It worked, thank you !!

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.