Displaying query result on same page PHP - php

Question

I am currently using a PHP script to add a record into my database, this works properly after some debugging. When the script runs, it opens a new page with the query output.
I'd like to display the query output on the same page that executes the query, at the top of the page, under my navbar.
Below is my current page.
This is the desired result.
The relevant code of the HTML page:
<form name="registration" action="addKlant.php" target="_blank" method="post">
<h3><i class="fa fa-plus-circle"></i> Klant toevoegen</h3>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> Naam</label>
<input type="text" name="klantNaam">
</div>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> Soort klant</label>
<select class="" name="klantSoort">
<option value="">Bedrijf</option>
<option value="">Particulier</option>
</select>
</div>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> Telefoonnummer</label>
<input type="number" name="klantTel">
</div>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> E-mail adres</label>
<input type="email" name="klantEmail">
</div>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> Straat & huisnr</label>
<input type="text" name="klantAdres">
</div>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> Postcode</label>
<input type="text" name="klantPostcode">
</div>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> Plaats</label>
<input type="text" name="klantPlaats">
</div>
<div class="form-input">
<input type="submit" name="submit" value="Klant toevoegen">
</div>
</form>
addKlant.php
<?php
require('db.php');
$stmt = $con->prepare('INSERT INTO `klanten` (klant_naam, klant_soort, klant_telefoon, klant_email, klant_straat, klant_postcode, klant_plaats) VALUES (?, ?, ?, ?, ?, ?, ?)');
if($stmt) {
$klant_naam = $_POST['klantNaam'];
$klant_soort = $_POST['klantSoort'];
$klant_telefoon = $_POST['klantTel'];
$klant_email = $_POST['klantEmail'];
$klant_adres = $_POST['klantAdres'];
$klant_postcode = $_POST['klantPostcode'];
$klant_plaats = $_POST['klantPlaats'];
$stmt->bind_param('ssissss', $klant_naam, $klant_soort, $klant_telefoon, $klant_email, $klant_adres, $klant_postcode, $klant_plaats);
$stmt->execute();
$con->close();
echo "Klant is toegevoegd, je kan deze pagina nu sluiten.";
}
?>
I was thinking about using something like if($_POST)? But I do not know how to implement it exactly.
It does not matter if the page refreshes to add the output, but I would like to keep it to PHP and not use JS (of course, if it is possible with only PHP).
Any tips are greatly appreciated.
EDIT: Edited my code with some help from #SloanTrasher
<?php
if($_POST['submit'] == 'Klant toevoegen') {
require('db.php');
$stmt = $con->prepare('INSERT INTO `klanten` (klant_naam, klant_soort, klant_telefoon, klant_email, klant_straat, klant_postcode, klant_plaats) VALUES (?, ?, ?, ?, ?, ?, ?)');
if($stmt) {
$klant_naam = $_POST['klantNaam'];
$klant_soort = $_POST['klantSoort'];
$klant_telefoon = $_POST['klantTel'];
$klant_email = $_POST['klantEmail'];
$klant_adres = $_POST['klantAdres'];
$klant_postcode = $_POST['klantPostcode'];
$klant_plaats = $_POST['klantPlaats'];
$stmt->bind_param('ssissss', $klant_naam, $klant_soort, $klant_telefoon, $klant_email, $klant_adres, $klant_postcode, $klant_plaats);
$stmt->execute();
$con->close();
}
}
?>
<!-- I placed it above the form for simplification -->
<?php ($_POST['submit'] == 'Klant toevoegen') {echo "<p>Klant is toegevoegd.</p>";}?>
<form name="registration" action="addKlant.php" target="_blank" method="post">
<h3><i class="fa fa-plus-circle"></i> Klant toevoegen</h3>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> Naam</label>
<input type="text" name="klantNaam">
</div>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> Soort klant</label>
<select class="" name="klantSoort">
<option value="">Bedrijf</option>
<option value="">Particulier</option>
</select>
</div>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> Telefoonnummer</label>
<input type="number" name="klantTel">
</div>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> E-mail adres</label>
<input type="email" name="klantEmail">
</div>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> Straat & huisnr</label>
<input type="text" name="klantAdres">
</div>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> Postcode</label>
<input type="text" name="klantPostcode">
</div>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> Plaats</label>
<input type="text" name="klantPlaats">
</div>
<div class="form-input">
<input type="submit" name="submit" value="Klant toevoegen">
</div>
</form>
EDIT 2: Working code for anyone interested
<?php
include('auth.php');
if($_POST['submit'] == 'Klant toevoegen') {
require('db.php');
$stmt = $con->prepare('INSERT INTO `klanten` (klant_naam, klant_soort, klant_telefoon, klant_email, klant_straat, klant_postcode, klant_plaats) VALUES (?, ?, ?, ?, ?, ?, ?)');
if($stmt) {
$klant_naam = $_POST['klantNaam'];
$klant_soort = $_POST['klantSoort'];
$klant_telefoon = $_POST['klantTel'];
$klant_email = $_POST['klantEmail'];
$klant_adres = $_POST['klantAdres'];
$klant_postcode = $_POST['klantPostcode'];
$klant_plaats = $_POST['klantPlaats'];
$stmt->bind_param('ssissss', $klant_naam, $klant_soort, $klant_telefoon, $klant_email, $klant_adres, $klant_postcode, $klant_plaats);
$stmt->execute();
$con->close();
}
}
?>
<!DOCTYPE html>
<html>
<head>
<!-- Charset, viewport en keywords -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Titel en favicon -->
<title></title>
<link rel="icon" href="./img/favicon.jpg">
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/pageForward.js"></script>
<script type="text/javascript" src="./js/pageBack.js"></script>
<!-- Stylesheets en fonts -->
<link rel="stylesheet" href="./css/backend_styles.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:200" rel="stylesheet"> <!-- font-family: 'Work Sans', sans-serif; -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet"> <!-- font-family: 'Open Sans', sans-serif; -->
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="top-links">
<p><i class="fa fa-home"></i><i class="fa fa-cogs"></i><a onclick="goBack()"><i class="fa fa-arrow-left"></i></a><a onclick="goForward()"><i class="fa fa-arrow-right"></i></a> Backoffice | Ingelogt als: <?php echo $_SESSION['username']; ?> | Uitloggen</p>
</div>
<?php if($_POST['submit'] == 'Klant toevoegen') {echo "<p>Klant is toegevoegd.</p>";}?>
<div class="inner-container">
<div class="backend-form">
<form name="registration" method="post">
<h3><i class="fa fa-plus-circle"></i> Klant toevoegen</h3>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> Naam</label>
<input type="text" name="klantNaam">
</div>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> Soort klant</label>
<select class="" name="klantSoort">
<option value="Bedrijf">Bedrijf</option>
<option value="Particulier">Particulier</option>
</select>
</div>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> Telefoonnummer</label>
<input type="number" name="klantTel">
</div>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> E-mail adres</label>
<input type="email" name="klantEmail">
</div>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> Straat & huisnr</label>
<input type="text" name="klantAdres">
</div>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> Postcode</label>
<input type="text" name="klantPostcode">
</div>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> Plaats</label>
<input type="text" name="klantPlaats">
</div>
<div class="form-input">
<input type="submit" name="submit" value="Klant toevoegen">
</div>
</form>
</div>
</div>
</div>
<footer>
<p>Copyright © 2018</p>
</footer>
</body>
</html>

Answer 1

Here's the working code. Glad you got it working!
<?php
include('auth.php');
if($_POST['submit'] == 'Klant toevoegen') {
require('db.php');
$stmt = $con->prepare('INSERT INTO `klanten` (klant_naam, klant_soort, klant_telefoon, klant_email, klant_straat, klant_postcode, klant_plaats) VALUES (?, ?, ?, ?, ?, ?, ?)');
if($stmt) {
$klant_naam = $_POST['klantNaam'];
$klant_soort = $_POST['klantSoort'];
$klant_telefoon = $_POST['klantTel'];
$klant_email = $_POST['klantEmail'];
$klant_adres = $_POST['klantAdres'];
$klant_postcode = $_POST['klantPostcode'];
$klant_plaats = $_POST['klantPlaats'];
$stmt->bind_param('ssissss', $klant_naam, $klant_soort, $klant_telefoon, $klant_email, $klant_adres, $klant_postcode, $klant_plaats);
$stmt->execute();
$con->close();
}
}
?>
<!DOCTYPE html>
<html>
<head>
<!-- Charset, viewport en keywords -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Titel en favicon -->
<title></title>
<link rel="icon" href="./img/favicon.jpg">
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/pageForward.js"></script>
<script type="text/javascript" src="./js/pageBack.js"></script>
<!-- Stylesheets en fonts -->
<link rel="stylesheet" href="./css/backend_styles.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:200" rel="stylesheet"> <!-- font-family: 'Work Sans', sans-serif; -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet"> <!-- font-family: 'Open Sans', sans-serif; -->
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="top-links">
<p><i class="fa fa-home"></i><i class="fa fa-cogs"></i><a onclick="goBack()"><i class="fa fa-arrow-left"></i></a><a onclick="goForward()"><i class="fa fa-arrow-right"></i></a> Backoffice | Ingelogt als: <?php echo $_SESSION['username']; ?> | Uitloggen</p>
</div>
<?php if($_POST['submit'] == 'Klant toevoegen') {echo "<p>Klant is toegevoegd.</p>";}?>
<div class="inner-container">
<div class="backend-form">
<form name="registration" method="post">
<h3><i class="fa fa-plus-circle"></i> Klant toevoegen</h3>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> Naam</label>
<input type="text" name="klantNaam">
</div>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> Soort klant</label>
<select class="" name="klantSoort">
<option value="Bedrijf">Bedrijf</option>
<option value="Particulier">Particulier</option>
</select>
</div>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> Telefoonnummer</label>
<input type="number" name="klantTel">
</div>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> E-mail adres</label>
<input type="email" name="klantEmail">
</div>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> Straat & huisnr</label>
<input type="text" name="klantAdres">
</div>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> Postcode</label>
<input type="text" name="klantPostcode">
</div>
<div class="form-input">
<label><i class="fa fa-info-circle"></i> Plaats</label>
<input type="text" name="klantPlaats">
</div>
<div class="form-input">
<input type="submit" name="submit" value="Klant toevoegen">
</div>
</form>
</div>
</div>
</div>
<footer>
<p>Copyright © 2018</p>
</footer>
</body>
</html>

Answer 2

I'm assuming that the HTML form is not part of addKlant.php?
In which case, once you've processed the form, you might want to redirect to the page with the HTML form, and pass an item in the querystring with some sort of variable to show the query has run.
i.e.
// ... after your form processing
$con->close();
header("Location: htmlpage.php?queryresult=ok");
exit;
and then in the HTML form page:
<?php if ($_GET['queryresult'] == 'ok') print "query ran okay"; ?>
I don't know what the result of the query might look like - if it is encodable within a url, you can pass this whole response, ie.
header("Location: htmlpage.php?queryresult=" . urlencode( $queryresultstring ));