I am trying to create a simple login page which only consist of one valid username and password. Hence I do not need to use MySQL to store other valid usernames and password.
I cannot get the alert message to display after clicking on the button. Anyone know what is the problem? When I click on the button, all the page does is refresh itself erasing any entries I previously made.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(':input[type="submit"]').prop('disabled', true);
$('input[type="email"]').keyup(function() {
if($(this).val() != '') {
$(':input[type="submit"]').prop('disabled', false);
}
});
$('#loginButton').click(function() {
var ValidUser = $('#usernameInput').val() === 'admin@company.com';
var ValidPassword = $('#passwordInput').val() === 'dogcat';
if (ValidEmail === true && ValidPassword === true)
{
alert("Login Successful");
}
else
{
alert("Incorrect Username/Password");
}
});
});
</script>
<title>Login</title>
</head>
<body>
<div id="loginMenu">
<span>
<form id="formLogin" name="login">
<Label>Username:</Label>
<br/>
<input id="usernameInput" name = "username" type="email" required="required">
<br/>
<label>Password:</label>
<br/>
<input id="passwordInput" name="password" type="password" required="required">
<br/>
<input id="loginButton" type="submit" value="Log In">
</form>
</span>
</div>
</body>
</html>
If you press F12 in your browser, you will see if there is any error with your code. In your case, it turned out you are using variable ValidEmail which is not defined. Use ValidUser instead and you will see your alerts. Here is a punker link I setup for your code.
I am also assuming yours is a test page not a production code.