html value doesn't appear as visible with jQuery in php form

Question

Just started working with php and little bit struggling with jQuery. Went through documentation and in my opinion everything should be working fine, however no. The hidden value does not appear visible after entering the wrong data into form. In css I assigned to #warning display:none

index.php

<?php require "../src/models/Database.php"; ?>
<?php include_once "../src/controllers/DatabaseController.php"; ?>

<?php session_start(); ?>
<?php include "../src/includes/header.php"; ?>
<?php
if (isset($_POST["submit"])) {
    $username = $_POST["username"];
    $password = $_POST["password"];
    $dbController = new DatabaseController();
    $dbController->loginUser($username, $password);
}
?>
<div class="container main">
    <h1 class="text-center">Web</h1>
    <p class="text-center" id="warning">Incorrect username or password</p>
    <div class="row login-page">
        <form class="form" method="POST">
            <input class="form-control" type="text" name="username" placeholder="Username" required>
            <input class="form-control" type="password" name="password" placeholder="Password" required>
            <input class="btn btn-success" type="submit" name="submit" value="Login">
        </form>
    </div>
</div>


<?php include "../src/includes/footer.php"; ?>

header.php

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Bootstrap starts -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- Bootstrap ends -->
    <!-- Css starts -->
    <link rel="stylesheet" href="../src/styles/css/main.css">
    <!-- Css ends -->
    <!-- Jquery starts -->
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <!-- Jquery ends -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="title"></title>
</head>

<body>

databasecontroller.php

<?php

class DatabaseController extends Database
{

    public function loginUser($username, $password)
    {
        $connection = $this->connection;
        $escapedUsername = mysqli_real_escape_string($connection, $username);
        $escapedPassword = mysqli_real_escape_string($connection, $password);

        $query = "SELECT * FROM users WHERE username = '$escapedUsername'";

        $result = $this->findUser($query, $escapedPassword);
        if ($result) {
            // $_SESSION["authenticated"] = true;
            echo "Logged in";
        } else { ?>
            <script>
                $("#warning").show();
            </script>
<?php
        }
    }
}

composer.json

{
    "require": {
        "components/jquery": "^3.5"
    }
}

In you script if you add `console.log($("#warning").length)` what value do you get? — Carsten Løvbo Andersen, May 07 '21 at 08:07
Why are you even using JS to do this? How are you calling your action, with a normal submission of the form or AJAX? Have you checked the console, are there any errors? — El_Vanja, May 07 '21 at 08:13
I don't get any errors in console. @CarstenLøvboAndersen I get 0 from console.log($("#warning").length). Also tried with echo — henrbu, May 07 '21 at 08:19
I believe you're approaching this the wrong way. Are you using AJAX to perform this login? — El_Vanja, May 07 '21 at 08:21
@HenryB When you get 0 means that the element with id `warning` does not exist when the code runs. try `$(document).ready(function() {$("#warning").show();})` — Carsten Løvbo Andersen, May 07 '21 at 08:22
@El_Vanja, sorry, but just started working with php and i'm pretty sure i do not use ajax at this point:D — henrbu, May 07 '21 at 08:23
@CarstenLøvboAndersen That did the trick! How to avoid next time this kind of issues? Any suggestions? Thanks for the help. — henrbu, May 07 '21 at 08:24
@HenryB best way is to either load your script at the end of page or wrap in document ready — Carsten Løvbo Andersen, May 07 '21 at 08:26
As a side note, your code is vulnerable to SQL injection, despite escaping - it's [not safe enough](https://stackoverflow.com/questions/5741187/sql-injection-that-gets-around-mysql-real-escape-string). You should switch to [prepared statements](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) to fully prevent it. — El_Vanja, May 07 '21 at 08:27
Anyway, back on topic: if your page is reloading when you login, then your function should simply return a boolean value, indicating if the login was successful or not. Then you just wrap your error message in a condition that checks the value and only renders the paragraph when it failed. Using jQuery to do this is a roundabout way. — El_Vanja, May 07 '21 at 08:29
Thanks for the help and suggestions, I will really take a look at prepared statements. — henrbu, May 07 '21 at 09:01
Please share more details about your problem - what do you mean by "The hidden value does not appear visible after entering the wrong data into form"? — Nico Haase, May 07 '21 at 12:55

score 1 · Accepted Answer · answered May 07 '21 at 12:41

You are including the jQuery script before the html is finished.

Therefore, there is no #warning on the page, yet. Nothing is shown.

You should either include your script after the <p class="text-center" id="warning"> or you can tell jQuery to wait until the document is ready before applying the show():

$( document ).ready(function() {
    $("#warning").show();
});

html value doesn't appear as visible with jQuery in php form

1 Answers1