I want to create a form that takes in an email address and a password. Email and password have been initialized before, so an error message will appear in the email or the password entered does not match. If both are correct then the message "login successful" should appear. How do I get this message to appear?
Here is my code:
var email = document.forms["form"]["email"].value;
var alamat = document.forms["form"]["password"].value;
if (email == "admin@example.com" && password == "12345") {
alert("Login Successful!");
} else {
alert("The email or password you entered is wrong!");
return false;
}body {
background: #3498db;
font-family: sans-serif;
}
h2 {
color: #fff;
}
.login {
padding: 1em;
margin: 2em auto;
width: 17em;
background: #fff;
border-radius: 3px;
}
label {
font-size: 10pt;
color: #555;
}
input[type="password"],
input[type="text"],
textarea {
padding: 8px;
width: 95%;
background: #efefef;
border: 0;
font-size: 10pt;
margin: 6px 0px;
}
.tombol {
background: #3498db;
color: #fff;
border: 0;
padding: 5px 8px;
}<html>
<head>
<title>Form Validasi</title>
<link rel="stylesheet" type="text/css" href="tampilan.css">
<script src="apps.js"></script>
</head>
<body>
<div class="login">
<form action="#" method="get" id="form">
<div>
<label>Email</label>
<input type="text" name="email" />
</div>
<div>
<label>Password</label>
<input type="password" name="password" />
</div>
<div>
<input type="submit" value="Login" class="tombol">
</div>
</form>
</div>
</body>
</html>In this way your javascript code get executed instantly, not when clicking.
If you want to execute a piece of code after clicking create a function, for example login().
And then add in your button element onClick="login()" and don't use input type="submit", use type="button" as type, because in this case you are not submiting any form but just processing it with js.
Please, also note that your are declaring var alamat but you check for var password == xxx in the condition (that you didn't create)
I fixed this too in the snippet by changing alamat with password.
Here the working snippet:
function login(){
var email = document.forms["form"]["email"].value;
var password = document.forms["form"]["password"].value;
if (email == "admin@example.com" && password == "12345") {
alert("Login Successful!");
} else{
alert("The email or password you entered is wrong!");
return false;
}
} body {
background: #3498db;
font-family: sans-serif;
}
h2 {
color: #fff;
}
.login {
padding: 1em;
margin: 2em auto;
width: 17em;
background: #fff;
border-radius: 3px;
}
label {
font-size: 10pt;
color: #555;
}
input[type="password"],
input[type="text"],
textarea {
padding: 8px;
width: 95%;
background: #efefef;
border: 0;
font-size: 10pt;
margin: 6px 0px;
}
.tombol {
background: #3498db;
color: #fff;
border: 0;
padding: 5px 8px;
}<html>
<head>
<title>Form Validasi</title>
<link rel="stylesheet" type="text/css" href="tampilan.css">
<script src="apps.js"></script>
</head>
<body>
<div class="login">
<form action="#" method="get" id="form">
<div>
<label>Email</label>
<input type="text" name="email"/>
</div>
<div>
<label>Password</label>
<input type="password" name="password"/>
</div>
<div>
<input onClick="login()" type="button" value="Login" class="tombol">
</div>
</form>
</div>
</body>
</html>Listen for the submit event:
form.addEventListener('submit', function(e) {
var email = document.forms["form"]["email"].value;
var alamat = document.forms["form"]["password"].value;
if (email == "admin@example.com" && password == "12345") {
alert("Login Successful!");
} else {
alert("The email or password you entered is wrong!");
e.preventDefault();
}
})body {
background: #3498db;
font-family: sans-serif;
}
h2 {
color: #fff;
}
.login {
padding: 1em;
margin: 2em auto;
width: 17em;
background: #fff;
border-radius: 3px;
}
label {
font-size: 10pt;
color: #555;
}
input[type="password"],
input[type="text"],
textarea {
padding: 8px;
width: 95%;
background: #efefef;
border: 0;
font-size: 10pt;
margin: 6px 0px;
}
.tombol {
background: #3498db;
color: #fff;
border: 0;
padding: 5px 8px;
}<html>
<head>
<title>Form Validasi</title>
<link rel="stylesheet" type="text/css" href="tampilan.css">
<script src="apps.js"></script>
</head>
<body>
<div class="login">
<form action="#" method="get" id="form">
<div>
<label>Email</label>
<input type="text" name="email" />
</div>
<div>
<label>Password</label>
<input type="password" name="password" />
</div>
<div>
<input type="submit" value="Login" class="tombol">
</div>
</form>
</div>
</body>
</html>