I'm trying to hide the form and show a loading GIF after submitting it. I've tried many methods and this is one of them. I tried replacing ClassName with Id and it didn't work.
It's a school project. I've spent way too long wondering what I'm doing wrong here and I am not sure what else to try.
The login button says "Kirjaudu".
html:
<div class="user" id="logsection">
<div class="user__header">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3219/logo.svg" alt="" />
<h1 class="user__title">Kirjaudu sisään</h1> <!-- kirjaudu sisään = login -->
</div>
<form class="form" action="login_users.php" method="post" name="loginform" onsubmit="processing()">
<div class="form__group">
<input name="username" type="text" placeholder="Käyttäjänimi" class="form__input" required/> <!-- käyttäjänimi = username-->
</div>
<div class="form__group">
<input name="password" type="password" placeholder="Salasana" class="form__input" required/> <!-- salasana = password -->
</div>
<button name="add" class="btn-prim" type="submit">Kirjaudu</button> <!-- kirjaudu = login-->
<button class="btn-sec" type="button" onclick="window.location.href='../register/register.php'">Luo tili</button> <!-- luo tili = sign up -->
</form>
</div>
js:
function processing() {
document.getElementById('loginsection').style.display = 'none'
document.getElementById('loading').style.display = 'block'
}
css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: helvetica;
font-size: 14px;
background-size: 200% 100% !important;
background: url('../img/login.jpg');
height: 100vh;
overflow-y: hidden;
}
header{
z-index: 2;
background: linear-gradient(#2b2b2b 31%, #1b1b1b 100%);
opacity: 100%;
width: 100%;
height: 70px;
box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.5);
}
header{
display: flex;
position: fixed;
top: 0;
}
header p{
color: #AAAAAA;
margin-left: 10%;
}
a img{
margin: 10px;
}
.user {
width: 90%;
max-width: 340px;
margin-left: 39%;
margin-top: 10%;
position: absolute;
}
.user__header {
text-align: center;
opacity: 0;
transform: translate3d(0, 500px, 0);
animation: arrive 500ms ease-in-out 0.7s forwards;
}
.user__title {
font-family: Arial;
margin-bottom: -10px;
font-weight: 500;
color: white;
}
.form{
margin-top: 40px;
border-radius: 6px;
overflow: hidden;
opacity: 0;
transform: translate3d(0, 500px, 0);
animation: arrive 500ms ease-in-out 0.9s forwards;
}
.form--no {
animation: NO 1s ease-in-out;
opacity: 1;
transform: translate3d(0, 0, 0);
}
.form__input {
display: block;
width: 100%;
padding: 20px;
font-family: $font-family;
-webkit-appearance: none;
border: 0;
outline: 0;
transition: 0.3s;
opacity: 80%;
&:focus {
background: darken(#fff, 3%);
}
}
.btn-prim {
display: block;
width: 100%;
padding: 20px;
font-family: $font-family;
-webkit-appearance: none;
outline: 0;
border: 0;
border-radius: 0px 0px 7px 7px;
color: white;
background: #ABA194;
transition: 0.3s;
}
.btn-prim:hover{
background: #91897d;
cursor: pointer;
}
.btn-sec {
display: block;
width: 100%;
padding: 20px;
font-family: $font-family;
-webkit-appearance: none;
outline: 0;
border: 3px solid transparent;
color: white;
background: transparent;
transition: 0.3s;
}
.btn-sec:hover{
color: #91897d;
cursor: pointer;
}
.loading{
background-image: url(../img/loading.gif);
width: 200px;
height: 200px;
display: none;
}
@keyframes NO {
from, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
@keyframes arrive {
0% {
opacity: 0;
transform: translate3d(0, 50px, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes move {
0% {
background-position: 0 0
}
50% {
background-position: 100% 0
}
100% {
background-position: 0 0
}
}
php:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="login.css"/>
</head>
<body>
<div class="container">
<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'kotisivu'); //kotisivu = homepage
$db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
session_start();
$_SESSION['success'] = "";
if($_SERVER["REQUEST_METHOD"] == "POST") {
$username = mysqli_real_escape_string ($db,$_POST['username']);
$password = mysqli_real_escape_string ($db,$_POST['password']);
$password = md5($password);
$sql = "SELECT * FROM users WHERE username = '$username' and password = '$password'";
$result = mysqli_query($db,$sql);
$_SESSION['username'] = $username;
$row = mysqli_fetch_array($result,MYSQLI_ASSOC);
$count = mysqli_num_rows($result);
if($count == 1) {
$_SESSION['username'] = $username;
sleep(3);
header("Location: ../homepage.php");
exit();
}else {
echo '<body>
<center>
<h2 style="color:red;margin-top:100px;">Väärä käyttäjänimi ja/tai salasana<br></h2>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/RedX.svg/1024px-RedX.svg.png" padding-left="50px" width="100px" height="100px"><br>
</center>
</body>'; //Väärä käyttäjänimi ja/tai salasana = Wrong username and/or password
header( "refresh:2;url=login.php" );
}
}
?>
<!-- ========================================================================= -->
