Automatically reload data from database into HTML form after submitting - php

Question

I am trying to create a user profile registration for my site. The basics are already in place, where users can now signup and login to the site.
Each member receives a unique Member ID in the DB and after logging in they are given access to the page below. It is a simple form that loads data from the database as pre-filled values in the html form input fields. Changing this data and submit the data, stores the data correctly in the database. All thanks to examples and advice from experts at this site.
My question is how would I make the form to reload, or the fields to update with the new data from the DB without having to reload the page manually after clicking the submit button?
It would also be greatly appreciated with any feedback about the security of this form. I have tried to study mySQL PDO and prepared statements to avoid SQL injection but I feel that I have a long way to go before fully understand it all and make sure the site is secure.
<?php require('includes/config.php');
//Redirect to login page if not logged in
if(!$user->is_logged_in()){ header('Location: login.php'); }
//Get user profile data from DB
$sth= $db->query ("SELECT username, firstname, middlename, lastname, email FROM members");
$sth->bindColumn (1, $username);
$sth->bindColumn (2, $firstname);
$sth->bindColumn (3, $middlename);
$sth->bindColumn (4, $lastname);
$sth->bindColumn (5, $email);
while ($sth->fetch (PDO::FETCH_BOUND))
//Process form when submitted
if(isset($_POST['submit'])){
//if nothing is wrong, store data in DB
if(!isset($error)){
try {
//update user profile in database with a prepared statement
$sql = "UPDATE members SET username = :username,
firstname = :firstname,
middlename = :middlename,
lastname = :lastname,
email = :email
WHERE memberID = :memberID";
$stmt = $db->prepare($sql);
$stmt->bindParam(':username', $_POST['username'], PDO::PARAM_STR);
$stmt->bindParam(':firstname', $_POST['firstname'], PDO::PARAM_STR);
$stmt->bindParam(':middlename', $_POST['middlename'], PDO::PARAM_STR);
$stmt->bindParam(':lastname', $_POST['lastname'], PDO::PARAM_STR);
$stmt->bindParam(':email', $_POST['email'], PDO::PARAM_STR);
$stmt->bindParam(':memberID', $_SESSION['memberID'], PDO::PARAM_STR);
$stmt->execute();
//catch error message if something is wrong
} catch(PDOException $e) {
$error[] = $e->getMessage();
}
}
}
//define page title
$title = 'Profile Registration';
//include member header
require('layout/header_member.php');
?>
<div class="container">
<h2>Please Register Your Profile</h2>
<p>Get started and register your profile below</p>
<p>Your member ID is: <?php echo $_SESSION['memberID']; ?> </p>
<?php
//show any error messages from the database here
if(isset($error)){
foreach($error as $error){
echo '<p class="bg-danger">'.$error.'</p>';
}
}
?>
</div>
<hr>
<div class="container">
<form class="form-horizontal" role="form" method="post" action="<? echo $_SERVER['PHP_SELF']; ?>">
<div class="form-group">
<label class="control-label col-sm-2" for="username">Display name</label>
<div class="col-sm-10">
<input type="text" required class="form-control" name="username" id="username" placeholder="Your Display Name" value="<?php if(isset($error)){ echo $_POST['username']; } ?><?php echo $username; ?>" >
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="firstname">First name</label>
<div class="col-sm-10">
<input type="text" required class="form-control" name="firstname" id="firstname" placeholder="Your first name" value="<?php if(isset($error)){ echo $_POST['firstname']; } ?><?php echo $firstname; ?>" >
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="middlename">Middle initials</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="middlename" id="middlename" placeholder="Middle initials" value="<?php if(isset($error)){ echo $_POST['middlename']; } ?><?php echo $middlename; ?>" >
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="lastname">Last name</label>
<div class="col-sm-10">
<input type="text" required class="form-control" name="lastname" id="lastname" placeholder="Your last name" value="<?php if(isset($error)){ echo $_POST['lastname']; } ?><?php echo $lastname; ?>" >
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email</label>
<div class="col-sm-10">
<input type="email" required class="form-control" name="email" id="email" placeholder="Your email address" value="<?php if(isset($error)){ echo $_POST['email']; } ?><?php echo $email; ?>" >
</div>
</div>
<button type="submit" name="submit" value="submit" class="btn btn-default">Submit</button>
</form>
</div>
<?php
//include footer
require('layout/footer.php');
?>

Answer 1

You can change the values of your HTML form to this:
value="<?php
if(isset($_POST['username'])) {
echo $_POST['username'];
} else {
echo $username;
} ?>"
The values submitted will show if the form failed (which you have used as $error) and also should the form successfully submit and update the database. In other words, it will always have either $username or the value that was last submitted in the form.
You could also look into "Sanitize filters" to filter away any unwanted characters that the user posts.