0

When you click the login button after you enter the correct username and password, it is supposed to redirect you. I posted the same question yesterday, but now I have slightly changed the code like some of the answers said, but it still hasn't worked. Please help.

<html>
<head>
<title>Login: MessengerX</title>
<link rel="stylesheet" type="text/css" href="C:\Users\Tania\Documents\Website\style.css">
<meta charset="UTF-8">
<meta name="description" content="HTML website called MessengerX. Send messages to anyone who has logged in.">
<meta name="author" content="Joshua Hurley">
<meta name="keywords" content="HTML, MessengerX, Joshua Hurley, Website, Supremefilms">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css"/>


</head>
<body>
  <div class="imgcontainer">
    <img src="C:\Users\Tania\Documents\Website\Screenshots\face.jpg" height="500" alt="Avatar" class="avatar">
  </div>
<div class="container">
<div class="main">
<h1 style="color:"><b><i>Login: MessengerX</i></b></h1>
<form id="form_id" method="post" name="myform">
<label>User Name :</label>
<input type="text" name="username" id="username"/>
<label>Password :</label>
<input type="password" name="password" id="password"/>
 <button type="submit" value="Login" id="submit" onclick="validate()"/>
</form>
<b><i>Submit</i></b>
</div>
</div>
<script type="text/javascript">
   window.addEventListener('load', (event) => {
     var attempt = 3;
     // Below function Executes on click of login button.
     function validate(){
     var username = document.getElementById("username").value;
     var password = document.getElementById("password").value;
     if ( username == "Joshua" && password == "Joshua#123"){
     alert ("Login successfully");
      window.location.replace("https://www.youtube.com"); // Redirecting to other page.
     }
     else{
     attempt -= 1;// Decrementing by one.
     alert("Incorrect username or password")
     alert("You have "+attempt+" attempt(s) left;");
     // Disabling fields after 3 attempts.
     if( attempt == 0){
       alert("Incorrect username or password")
     document.getElementById("username").disabled = true;
     document.getElementById("password").disabled = true;
     document.getElementById("submit").disabled = true;
     return false;
     }
     }
     }
 });
</script>
<script src="js/login.js"></script>
</body>
</html>
Andreas
  • 21,535
  • 7
  • 47
  • 56
Joshua Hurley
  • 1
  • 1
  • 2
    User validation in javascript? Without any api? Seriously? It's so easy to break that you might not do any validation at all, it's almost the same – Buddy Christ Apr 30 '20 at 07:40
  • Does this answer your question? [How do I redirect to another webpage?](https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage) – Emiel Zuurbier Apr 30 '20 at 07:40
  • Can you be more specific like what is not working? Redirection ? login code? what's the error? any alert is triggered? if yes which one? – uiTeam324 Apr 30 '20 at 07:43
  • The form submission already redirects (to the same page), you can't redirect from JS when there's a pending form submission. – Teemu Apr 30 '20 at 07:44

1 Answers1

0

you have to prevent the default behavior of Submitting, and once you do that- you can redirect.

    $("form").submit(function(event){ //edited
        event.preventDefault()
..your code here
    });
Edison Neza
  • 43
  • 3
Itay Daniel Zecharia
  • 21
  • 3