如何在执行php脚本后将mysql查询结果返回到html页面？

Question

I am having a form where the user enters 2 variables. These 2 variables are used in my mysqlquery. The result can be either: no matches or 1 or more matches. In each case I would like to have the output of that sql query as result on the original webpage below the entry fields (in the "queryresult" text field). How to do that?

The query is working but after clicking the button a new page is opened with the result of the query which is what I don't want.

you can see the form here: www.larscichowski.nl/coinexchange

I tried already with hidden iframe and checked the answers on a similar question

within the html this is the code for the form part:

        <section class="section-form" id="form">
            <div class="row" >
                <h2>Coin Exchange Finder</h2>
            </div>
            <div class="row">
            <form method="get" action="query.php" class="contact-form">



                    <div class="row">


                        <div class="col span-1-of-3">
                            <label for="name">Source Coin</label>
                        </div>

                        <div class="col span-1-of-3">
                            <input class="typeahead form-control" name="sourcecoin" id="sourcecoin" type="text" required>
                        </div>



                    </div>
                    <div class="row">


                        <div class="col span-1-of-3">
                            <label for="name">Destination Coin</label>
                        </div>

                        <div class="col span-1-of-3">
                            <input class="typeahead form-control" name="destcoin" id="destcoin" type="text" >
                        </div>
                    </div>
                    <script type="text/javascript">



                    <div class="row">
                        <div class="col span-1-of-3">
                            <label>&nbsp;</label>
                        </div>

                        <div class="col span-2-of-3">
                            <input type="submit" value="Find matching 
 exchanges">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col span-1-of-3">
                            <label>We found the following matches:</label>
                        </div>
                        <div class="col span-2-of-3">
                            <input type="text" id="queryResult"/>
                        </div>
                    </div>
                </form>
            </div>
        </section>

the query.php file looks like this:

<?php
$servername = "xx";
$username = "xx";
$password = "xx";
$dbname = "xx";
$sourcecoin = strip_tags(trim($_POST["sourcecoin"]));
$destcoin = strip_tags(trim($_POST["destcoin"]));


// Create connection

$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
    echo "Connection not established. Check credentials";
} 


$sql = "SELECT Pairs_Source.Exchange, Exchanges.HyperLink
FROM Pairs AS Pairs_Source INNER JOIN Pairs AS Pairs_Dest ON 
Pairs_Source.Exchange = Pairs_Dest.Exchange
Left join Exchanges on Pairs_Source.Exchange=Exchanges.Exchange
WHERE Pairs_Source.Coin='$sourcecoin' AND Pairs_Dest.Coin='$destcoin'";


$result = $conn->query($sql);



$json = [];
if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
        $json[]=$row['Exchange'];
        //echo "<br> They have got the following exchange(s) in common: ". 
 $row["Exchange"] ."<br>";
    }

} else {
        echo "Unfortunately these 2 coins don't have an exchange in 
 common";
}
    echo json_encode($json);

$conn->close();
?>

Answer 1

You can submit the form to the same page and have the php code in the same file.

To do this, wrap your PHP code within if($_SERVER['REQUEST_METHOD'] == 'POST') , so it will only run when the form is submitted.

---

You need to change your form tag so it submits to the current page (or the page name in the action):

<form method="post" action="" class="contact-form">

Then, you can change your result part to something like this. (So it will store the message that you want to display into a variable):

$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
        $message = "<br> They have got the following exchange(s) in common: 
 ". $row["Exchange"] ."<br>";
     }

 } else {
         $message = "Unfortunately these 2 coins don't have an exchange in 
 common";
 }

Finally, you can echo the message anywhere in your page by doing this:

if(isset($message)) {
    echo $message;
}

---

Your page will look something like this:

if($_SERVER['REQUEST_METHOD'] == 'POST') {

  // The contents of query.php

}

// the html code