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 so it isn't urgent, but I've spent way too long wondering what I'm doing wrong here and idk what else to try.
The login button says "Kirjaudu".
html:
<div id="logsection">
<div >
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3219/logo.svg" alt="" />
<h1 >Kirjaudu sisään</h1> <!-- kirjaudu sisään = login -->
</div>
<form action="login_users.php" method="post" name="loginform" onsubmit="processing()">
<div >
<input name="username" type="text" placeholder="Käyttäjänimi" required/> <!-- käyttäjänimi = username-->
</div>
<div >
<input name="password" type="password" placeholder="Salasana" required/> <!-- salasana = password -->
</div>
<button name="add" type="submit">Kirjaudu</button> <!-- kirjaudu = login-->
<button 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 >
<?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" );
}
}
?>
<!-- ========================================================================= -->
CodePudding user response：
You are giving too much effort to do this simple task. Just try this simple logic:
<div id="formSectionID">
<form onsubmit="processingx()">
.............
</form>
</div>
<div id="processingSectionID" style="display:none">
<img src="processing.gif" height="50">
</div>
<script>
function processingx() {
document.getElementById('formSectionID').style.display = 'none'
document.getElementById('processingSectionID').style.display = 'block'
}
</script>
CodePudding user response：
After analyzing your code, what I could understand is the form is getting submitted and it redirects to "login_users.php" that's the default behavior.
You have 2 choices here.
- Display the loading GIF as pre-loader in "login_users.php" see here
- Use ajax call to send user details to php page and while receiving ajax response stop showing loading GIF
Below is a simple example: -
function login(){
document.getElementsByClassName('myForm')[0].style.display='none';
document.getElementsByClassName('load')[0].style.display='block';
}<form >
<input type="text" placeholder="enter_name"/>
<input type="password" placeholder="password"/>
<input type="button" value="login" onclick="login()">
</form>
<div style="display:none;text-align:center"><img src="https://media4.giphy.com/media/y1ZBcOGOOtlpC/giphy.gif?cid=790b761183293fb50b01470e2d69f77e553e1069d6c5464c&rid=giphy.gif&ct=g"></div>For any queries comment down.
CodePudding user response：
After analyzing your code, what I could understand is the form is getting submitted and it redirects to "login_users.php" that's the default behavior.
You have 2 choices here.
- Display the loading GIF as pre-loader in "login_users.php" see here
- Use ajax call to send user details to php page and while receiving ajax response stop showing loading GIF
Below is a simple example: -
function login(){
document.getElementsByClassName('myForm')[0].style.display='none';
document.getElementsByClassName('load')[0].style.display='block';
}<form >
<input type="text" placeholder="enter_name"/><br/>
<input type="password" placeholder="password"/><br/>
<input type="button" value="login" onclick="login()"/>
<input type="reset" value="reset"/>
</form>
<div style="display:none;text-align:center"><img src="https://media4.giphy.com/media/y1ZBcOGOOtlpC/giphy.gif?cid=790b761183293fb50b01470e2d69f77e553e1069d6c5464c&rid=giphy.gif&ct=g"></div>For any queries comment down.