Images not loading when the form is submitted

full code:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Guess the Age and Country Game</title>
</head>
<body>
    <header>
        <h1>Guess the Age and Country Game</h1>
    </header>
    <main>
        <?php
        $connection = mysqli_connect("sql107.infinityfree.com", "if0_34903940", "HIDDEN BY MOD", "if0_34903940_ve");
        if (!$connection) {
            die("Database connection failed: " . mysqli_connect_error());
        }
        
        if ($_SERVER["REQUEST_METHOD"] == "POST") {
            $userAgeGuess = $_POST['ageGuess'];
            $userCountryGuess = $_POST['countryGuess'];
            
            $query = "SELECT * FROM people WHERE id = " . mysqli_real_escape_string($connection, $_POST['personId']);
            $result = mysqli_query($connection, $query);
            
            if ($row = mysqli_fetch_assoc($result)) {
                $correctAge = $row['age'];
                $correctCountry = $row['country'];
                $fullName = $row['full_name'];
                $fullphoto = $row['fullphoto_url'];
                $pathx = "images/";
                if ($userAgeGuess == $correctAge && strtolower($userCountryGuess) == strtolower($correctCountry)) {
                    $message = "Congratulations! Your guesses are correct!";
                } else {
                    $message = "Oops! Your guesses are incorrect. Try again!";
                }
                
                echo '<div id="result">' . $message . '</div>';
                echo '<div id="personInfo" style="display: block;">';
                echo '<h2>' . $fullName . ' is ' . $correctAge . ' from ' . $correctCountry . '</h2>';
                echo '<img src="'.$pathx.$fullphoto.'">';
                echo '</div>';
            }
        } else {
            $query = "SELECT * FROM people ORDER BY RAND() LIMIT 1";
            $result = mysqli_query($connection, $query);
            
            if ($row = mysqli_fetch_assoc($result)) {
                $photoUrl = "/images/" . $row['vphoto_url'];
                $personId = $row['id'];
            }
        }
        ?>
        <div class="photo-container">
            <img src="<?php echo $photoUrl; ?>" alt="Person Photo" id="personPhoto">
        </div>
        <div class="guess-form">
            <form action="index.php" method="post">
                <input type="hidden" name="personId" value="<?php echo $personId; ?>">
                <label for="ageGuess">Guess the age:</label>
                <input type="number" id="ageGuess" name="ageGuess" min="18" max="120" required>
                <label for="countryGuess">Guess the country:</label>
                <input type="text" id="countryGuess" name="countryGuess" required>
                <button type="submit" id="submitGuess">Submit Guess</button>
            </form>
        </div>
    </main>
    <script src="script.js"></script>
</body>
</html>

Why are you posting password publicly ???
I edited your post, but maybe someone has already seen it

btw. welcome to the forum

9 Likes

oh shoot i am so stupid

1 Like

You should consider resetting your hosting account’s password immediately by the account settings in the Client Area.

4 Likes

Obiviously, when the user make a guess, the code goes into the upper part, resulting in the variable $photoUrl wasn’t created at all. And of course, you cannot load an non-existent thing here in:

Simply use $photoUrl at both places and only use one <img> output.

And if possible, please kindly share your website url, as these are just guess.


I also see that the base url for your image files are a little bit different — the true part for your if uses images/, while the else part for your if uses /images/.

Of course if you just put the files inside your website root it doesn’t matter; but if it’s inside a sub-directory then it matters.

9 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.