I have a MySQL database that currently has a table called "loginInfo" which stores the users email, phone number, username, and password. Once they log in, I want to have an option for them to update their email and/or their phone number (the password is handled separately but I would assume would work similarly to this.) I know I would have to use the "UPDATE loginInfo SET email = newemail@test.com WHERE username = logged_in_username"; My issue is, I don't know how to fetch the current logged in users username is. I have a login.php script that looks through the table for a matching username and password, as well as a createAccount.php script that adds an email/username/password to the table as well.
I believe I would know how to do this as long as I knew how to fetch what the current logged in username is, just unfamiliar with how I could go about doing so.
login.php
<?php
    session_start();
    include_once 'conn.php';
    if(empty($_POST['username']) || empty($_POST['password']))
            header('Location: ../html/index.html');
    else {
        if(isset($_POST['loginBtn'])) {
            $username = $_POST['username'];
            $password = $_POST['password'];
            $password = md5($password);
            $_SESSION['username'] = $username;
            $_SESSION['password'] = $password;
            $query = "SELECT username, password FROM loginInfo WHERE username=? AND password=? LIMIT 1";
            $stmt = $conn->prepare($query);
            $stmt -> bind_param("ss", $username, $password);
            $stmt -> execute();
            $stmt -> bind_result($username, $password);
            $stmt -> store_result();
            if($stmt->fetch()) {
                header('Location: ../html/mainPage.html');
            }
            else {
                echo "Error logging in";
            }
            mysqli_close($conn);
        }
    }
?>
updateInfo.html
<html>
    <link rel="stylesheet" href="../css/updateInfo.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<body>
    <div class="header">
        <h1 id="head1">Lost And Found</h1>
        <div class="navbar">
        <a href="mainPage.html" class="home-btn">Home</a>
            <div class="profile-dropdown">
            <button class="profile-btn">Profile <i class="fa fa-caret-down"></i></button>
            <div class="profile-content">
                <a href="yourListings.html">Your Listings</a>
                <a href="updateInfo.html">Update Info</a>
            </div>
        </div>
        <div class="search-dropdown">
            <button class="search-btn">Search <i class="fa fa-caret-down"></i></button>
            <div class="search-content">
                <a href="searchLost.html">Search Lost</a>
                <a href="searchFound.html">Search Found</a>
            </div>
        </div>
         <div class="listings-dropdown">
            <button class="listings-btn">Listings <i class="fa fa-caret-down"></i></button>
            <div class="listings-content">
                <a href="reportLost.html">Report Lost</a>
                <a href="reportFound.html">Report Found</a>
            </div>
        </div>
           <div class="settings-dropdown">
            <button class="settings-btn">Settings <i class="fa fa-caret-down"></i></button>
            <div class="settings-content">
                <a href="changePassword.html">Change Password</a>
            </div>
        </div>
        <a href="index.html" class="logout-btn">Logout</a>
        </div>
    </div>
    <script type="text/javascript">
        var nav = document.getElementsByClassName("navbar");
        window.onscroll = function sticky() {
            if(window.pageYOffset > nav[0].offsetTop) {
                nav[0].classList.add("nav");
            }
            else {
                nav[0].classList.remove("nav");
            }
        }
    </script>
    <form class="login-box" action="../php/updateInfo.php" method="post">
            <h1 id="header3">Update Account Info</h1>
            <input type="text" name="newEmail" placeholder="New Email">
            <input type="text" name="newPhone" placeholder="New/Add Phone Number">
            <input type="submit" name="updateBtn" value="Update">
            <a href="createAccount.html">Want to change your password?</a>
        </form>
   <div class="footer">
            <a class="social-btn" href="http://www.facebook.com"><i class="fa fa-facebook"></i></a>
            <a class="social-btn" href="http://www.twitter.com"><i class="fa fa-twitter"></i></a>
            <a class="social-btn" href="http://www.youtube.com"><i class="fa fa-youtube"></i></a>
            <a class="social-btn" href="http://www.instagram.com"><i class="fa fa-instagram"></i></a>
        </div>
</body>
</html>
Expected results should let the currently logged in user update their email/phone number within the loginInfo table, replacing their old information.
 
    