Get data MySQL DB and display on in HTML

Question

How would I code into my program using PHP/JavaScript and HTML/CSS to display data from a database I made in MySQL Monitor on the blue section below:

I made buttons that use PHP to go into the database and show the data on the HTML page:

HTML:

<form action="fullridez.php" method="post">
        <h4 id="Filter">GPA</h4>
        <input id="FilterBox" name="gpa" type="text"/>
        <h4 id="Filter">Amount</h4>
        <input id="FilterBox" name="amount" type="text"/>
        <h4 id="Filter">School</h4>
        <input id="FilterBox" name="school" type="text"/>
       <input  type="submit" id="FilterBox" name="myForm" onkeypress="checkEnter()" ><img src="search.png" width=15 height=15 /></button>
      </form>
      <script>
      </script>

PHP:

   <?php

if(isset($_POST['myForm'])) {

$servername = "localhost";
$username = "root";
$password = "";
$database = "scholarshiplist";

 $conn = mysqli_connect($servername, $username, $password, $database);

 $gpa = $_POST['gpa'];
 $amount = $_POST['amount'];


 $count = "SELECT * FROM scholarships";
 $result = mysqli_query($conn, $count);

 if ($result->num_rows > 0) {
    $sql = "SELECT * FROM scholarships WHERE GPA <= " . $gpa . " AND Amount <= " 
    . $amount;

     if ($result = mysqli_query($conn, $sql)) {
        while ($row=mysqli_fetch_row($result)) {
            for($i = 0; $i < count($row); $i++) {
                echo $row[$i] . '<br>';
            }
        } 
     }

 } else {
     echo "0 results";
}

$conn->close();

}

SQL:

USE ScholarshipList;

CREATE TABLE Scholarships
(
  id             int unsigned NOT NULL auto_increment, 
  School         varchar(500) NOT NULL,                
  GPA            decimal(10,2) NOT NULL,                
  Amount         decimal(10,2) NOT NULL,               

  PRIMARY KEY     (id)
);

I am using XAMPP

When I click the button on the HTML file it bring me to the PHP page and all I see is the PHP code. I don't want it to go to the page but stay on the same page showing the data below the buttons.

This is what the page looks like so far

page

What am I doing wrong?

Answer 1

You can build a wireframe div table with for loop:

<?php 
$num_rows = mysql_num_rows($result);
for ($i=0;$i<$num_rows;$i++) { 
    //loop through all rows of data
    $row = mysql_fetch_assoc($result); // your data is now:  $row['fieldName']
    ?>
    <div>
        GPA <input name="" value="<?php echo($row['gpa'])?>;" type="text"> 
        AMOUNT <input name="" value="<?php echo($row['amount'])?>;"  type="text"> 
        SCHOOL <input name="" value="<?php echo($row['school'])?>;"  type="text">
    </div>
<?php 
} //end of the loop
?>

Answer 2

If your HTML form is contained within the 'fullridez.php' file and you are posting the form inputs to that same file, then you need to have some PHP where you'd like to output to be checking for results and then looping through those results while echoing them out:

<table>
    <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td></tr>
    <?php
        while($row = mysql_fetch_assoc($result))
        {
            echo "<tr><td>"
                . $row['col_1'] . "</td><td>"
                . $row['col_2'] . "</td><td>"
                . $row['col_3'] . "</td></tr>";
        }
    ?>
</table>