Placing Error Message from PHP to specific place in HTML

Question

I have created a log in system. My PHP is on a separate script file than my HTML. I want to display a specific error message at a specific spot on my login form. How do I do this? Here is my PHP, you will see my error message at the bottom of the code.

<?php
// start session 
session_start();

// link textboxes to variables
$email      =   $_REQUEST['txt_Email'];
$pword      =   $_REQUEST['txt_Password'];

// connecting to database (host, username, password, db_name)
$db = new mysqli("localhost","dbuser","dbp@55word","db_OnlineBookClub");

// checking for database connection errors
if(mysqli_connect_errno()) {
    echo "Error Connecting To Database";
    exit;
}
       
// building the query with CRUD statement
$result = $db->query("SELECT name, email, pword FROM tbl_userInfo 
    WHERE email = '$email' AND pword = '$pword' ");

// retrieving number of rows from database
$row_count = $result-> num_rows;

// checking if the query ran successfully
if($row_count > 0) {
    for($i = 0; $i < $row_count; $i++) {
        $row = $result-> fetch_assoc();
        
        // set name as session object 
        $_SESSION['name'] = $row['name'];
    
        header("Location: Home.php");
        exit;
    }
} else {
    // if error occurs
    $errorMsg   =   "Could not find account. Please register.";
}
// closing the database connection
$db->close();
?>

Here is my HTML, you will see the error message at the bottom. I want it to be displayed in that cell in the table.

<html>
<head> 
    <title>Login</title>
    <style>
        body {
            /* Background image */
                background-image: url(Backgrounds/login.jpg);
                background-repeat: no-repeat;
                background-size: cover;
        }
        /* login form table */
        #tbl_login {
            width:40%;
            align-content:center;
            background-color: #FFFFFF;
            margin-top: 300px;
            align-content: center;
            text-indent: 20px;
        }
        .clm {
            color: #606060;
            font-size: 17px;
            font-family: Century Gothic;
            font-weight: bold;
            padding: 10px;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="external.css">
</head>
<body>
    <table id="tbl_login" align="center">
    <form action="LoginProcess.php" method="POST">
        <tr><td colspan="2" class="clm"><p></p></td></tr>
        <tr>
            <td class="clm">Email:</td>     <td align="left"> <input type="text" name="txt_Email" placeholder="johndoe@gmail.com"/> </td>
        </tr>
        <tr>
            <td class="clm">Password:</td>  <td align="left"> <input type="text" name="txt_Password" placeholder="p@ssw0rd"/> </td>
        </tr>
        <tr>
            <td colspan="2" class="clm" align="center"> 
            <!-- Go to Forgot Password page to change password -->
            <a href="ForgotPW.php"> Forgot Password </a> </td>
        </tr>
        <tr><td class="clm" align="right"> 
            <!-- Button to log in -->
            <input type="submit" name="btn_Login" class="tealbutton" value="Log In"/>
            </td>
            <td class="clm" align="left">
            <!-- Button to log in -->
            <input type="submit" name="btn_Register" class="greybutton" value="Register"/>
            </td>
            </tr>
        <tr><td colspan="2" class="clm"><p> 
                <p id="errorMsg" class="error"> 
                    <?php 
                        echo $errorMsg; 
                    ?> 
                </p></td></tr>
    </form>
    </table>
</body>

PLEASE NOTE: This is just for an assignment. Not necessary to worry about security

**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) — Dharman, Sep 17 '21 at 19:16
**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, Sep 17 '21 at 19:20
Please note that this log in system is utterly broken. It lets access anyone without even a password. — Dharman, Sep 17 '21 at 19:21
There should be only one user with a specific email. If not how would you possibly know which one it was (in reality you would not be using the password) as that should be hashed and therefore useless in the find the user query — RiggsFolly, Sep 17 '21 at 19:25

score 0 · Accepted Answer · answered Sep 17 '21 at 20:16

If the 'html' file is an actual plain .html file, you can't execute php code inside it.

Assuming it is instead a .php file, one possibility is to import the login script before the html part. In this way the $errorMsg variable is visible to the page (you also have to define it as null or empty string outside the else block or check for its existence before trying to output it).
When the page is first loaded, avoid to execute the login block by checking if you are receiving data from the form.

Another possibility, keeping the two scripts separated, is to redirect back to the form page in case of errors. In this case you could either pass the error message (or an error code) as query parameter or save it in the session.
In the first case you check if the GET parameter exists and output it.
In the second case you check if the session key exists, you save it on a local variable or output it, and then unset the session key.

As a side note, I would suggest to use the 303 status code, when a Location redirect is made in response to a POST request.
Example: header("Location: Home.php", true, 303);

Placing Error Message from PHP to specific place in HTML

1 Answers1