Add class to html element when PHP condition is met

Question

Im trying to make a field longer if there's an error so I can fit the error message in it.

In addAccToDB.php I set $error to "Wachtwoorden komen niet overeen." if the 2 entered passwords do not match and I redirect the user back to createaccount.php. Back in createaccount.php $error appearently is still not set though so it doesn't add the class "extend" to the field to make it longer. This is what I tried:

createaccount.php:

    <html>
<head>
    <title>Account maken</title>
    <link href="accounts.css" rel=stylesheet>
</head>
<body>
<div class="field <?php if (isset($error)){echo "extend";}?>" id=createaccount >
    <h1 class="title">Account aanmaken</h1>
    <h4 class="undertitle">Als je een leraar bent kun je hier je account aanmaken.
        Als je een leerling bent moet een leraar je account maken.</h4>
    <form action="addAccToDB.php">
        Voornaam:<br>
        <input class="input" placeholder="Voornaam" type="text" name="firstname"><br>
        Achternaam:<br>
        <input class="input" placeholder="Achternaam" type="text" name="lastname"><br>
        Email:<br>
        <input class="input" placeholder="Email" type="text" name="email"><br>
        Wachtwoord:<br>
        <input class="input" placeholder="Wachtwoord" type="password" name="pass"><br>
        Herhaal wachtwoord:<br>
        <input class="input" placeholder="Herhaal wachtwoord" type="password" name="repass"><br>
        <input class="submit" type="submit" value="Account aanmaken">
    </form>
</div>
</body>
</html>

addAccToDB.php:

<?php
include "db_connection.php";
if ($_GET['pass'] == $_GET['repass']){
    $Voornaam = $_GET['firstname'];
    $Achternaam = $_GET['lastname'];
    $Email = $_GET['email'];
    $Wachtwoord = $_GET['pass'];
    mysqli_query(OpenCon(),"INSERT INTO accounts (Firstname, Lastname, Email, Password, Type) 
    VALUES ('$Voornaam', '$Achternaam', '$Email', '$Wachtwoord',0)");
} else {
    $error = "Wachtwoorden komen niet overeen.";
    header("Location: createaccount.php");
}

accounts.css:

@font-face {
    font-family: Torus Regular;
    src: url("Torus Regular.otf");
}

body {
    background-image: url('RekensiteBackground.png');
}

.field {
    font-family: "Torus Regular";
    margin-top: 25px;
    color: white;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 600px;
    border-radius: 16px;
    font-size: 17px;
    background-color: #333;
}

#signin {
    height: 450px;
}

#createaccount {
    height: 720px;
}

.extend {
    animation:extend;
    animation-duration: 500ms;
    animation-fill-mode: forwards;
}

@keyframes extend{
    to {height: 750px;}
 }

#forgotpass {
    height: 350px;
}

.title {
    font-size: 35px;
}

.undertitle {
    font-size: 20px;
    position: relative;
    transform: translate(-50%, -50%);
    left: 50%;
    width: 550px;
    margin-top: 30px;
    margin-bottom: 20px;
}

.input {
    font-family: "Torus Regular";
    font-size: 20px;
    color: white;
    background-color: #222;
    border: none;
    border-radius: 7px;
    padding: 7px 10px;
    width: 20em;
    height: 2em;
    margin-bottom: 25px;
    margin-top: 5px;
}

.submit {
    font-family: "Torus Regular";
    color: white;
    font-size: 20px;
    height: 55px;
    width: 350px;
    position: absolute;
    transform: translate(-50%, -50%);
    margin-top: 35px;
    left: 50%;
    background-color: red;
    border: none;
    border-radius: 10px;
}

.submit:hover {
    cursor: pointer;
    animation: hover 200ms;
    animation-fill-mode: forwards;
}

.signinlinks {
    font-family: "Segoe UI";
    font-size: 16px;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    width: 500px;
    margin-top: 100px;
}

.error {
    
}

.hyperlinks:link {
    text-decoration: none;
    color: rgb(255, 204, 34);
}

.hyperlinks:hover {
    text-decoration: underline;
}

.hyperlinks:visited {
    color: rgb(255, 204, 34);
}

@keyframes hover {
    from {
        filter: brightness(100%);
    }
    to {
        filter: brightness(85%);
    }
}

**Never store passwords in clear text or using MD5/SHA1!** Only store password hashes created using PHP's [`password_hash()`](https://php.net/manual/en/function.password-hash.php), which you can then verify using [`password_verify()`](https://php.net/manual/en/function.password-verify.php). Take a look at this post: [How to use password_hash](https://stackoverflow.com/q/30279321/1839439) and learn more about [bcrypt & password hashing in PHP](https://stackoverflow.com/a/6337021/1839439) — Dharman, Jan 21 '21 at 19:52
@Dharman I was planning to store my passwords in hashes. Didn't know how to do that yet, so thanks! And I'm currently learning how to use the prepared statements! Thanks for the feedback! :) — Dirk Freijters, Jan 22 '21 at 01:06

Filip Krstic · Accepted Answer · 2021-01-21T19:01:51.623

2

The HTTP protocol is stateless. That means you cannot save data in variable for later. You can use a session to store values in siuations like this one. Check PHP Sessions for more info.

In short:

Start session if you did not already done it.
Save message in session $_SESSION["error"] = "Error message";
Check and echo error value if isset($_SESSION["error"]) { echo $_SESSION["error"]; }

edited Jan 21 '21 at 19:01

answered Jan 21 '21 at 18:53

Filip Krstic

713
7
19

Add class to html element when PHP condition is met

1 Answers1