Untitled

<html>
<head>
    <link rel="stylesheet" href="Public_Page.css">
    <title>Public Main Page</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>

<body>
    <div id="greetUser"></div>
    <div id="divMessage"></div>
    <p>Add a bike here:</p>
    <form id="addBikeForm" action="publicPage.php" method="POST">
        <input type="text" name="brand" placeholder="Brand" required="required"><br><br>
        <input type="text" name="model" placeholder="Model" required="required"><br><br>
        <input type="text" name="type" placeholder="Type of Bicycle" required="required"><br><br>
        <input type="text" name="colour" placeholder="Colour" required="required" ><br><br>
        <input id="bikeFormButton" type="submit" value = "Submit">
    </form>


<script>
var username = sessionStorage.getItem('username');
document.getElementById("greetUser").innerText = 'Hello ' + username;
</script>

<script src="../../JavaScript/publicPage.js"></script>

</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------------
console.log("js loaded")
$('#addBikeForm').on('submit', function(e) {
    formData = $(this).serialize();
    e.preventDefault();

    $.ajax({
        method: "POST",
        url: "publicPage.php",
        data: formData,
        cache: false,
        success: function(msg) {
            console.log(msg);
            if (msg === "You already have a bike added") {
                $("#divMessage").html("You already have a bike added");
            } else if (msg === "Successfully added") {
                console.log(msg);
                $("#divMessage").html("Successfully added!")
                brand = msg.brand;
                model = msg.model;
                type = msg.type;
                colour = msg.colour;
                sessionStorage.setItem('brand', brand);
                sessionStorage.setItem('model', model);
                sessionStorage.setItem('type', type);
                sessionStorage.setItem('colour', colour);
            }
        }
    });
});
-------------------------------------------------------------------------------------------------------------------------------------
<?php
session_start();//Start session

$connection = new mysqli("x", "x", "x", "x");//Establish connection with database
$username = $_SESSION['username'];//Assign variables
$brand = $_POST['brand'];
$model = $_POST['model'];
$type = $_POST['type'];
$colour =  $_POST['colour'];

$sqlUserID = "SELECT userID FROM `publicUsers` WHERE publicUsername = '$username'";
$userIDExistsResult = mysqli_query($connection, $sqlUserID);

if ($userIDExistsResult && mysqli_num_rows($userIDExistsResult) > 0) {
    $row = mysqli_fetch_assoc($userIDExistsResult);
    $userID = $row['userID'];

    $sqlCheckBike = "SELECT * FROM bikes WHERE userID = '$userID'";
    $bikeExistsResult = mysqli_query($connection, $sqlCheckBike);

    if ($bikeExistsResult && mysqli_num_rows($bikeExistsResult) > 0) {
        echo "You already have a bike added";
    } else {
        //Insert bike into database
        $sqlInsertBike = "INSERT INTO bikes (userID, bikeBrand, bikeModel, bikeType, bikeColour) VALUES ('$userID', '$brand', '$model', '$type', '$colour')";

        if (mysqli_query($connection, $sqlInsertBike)) {
            echo "Successfully added!";
        } else {
            echo "Error: " . mysqli_error($connection);
        }
    }
}
?>