Return data when click on drop-down button

Question

Here I have a drop-down Menu like this:

<div class="btn-group" role="group">
  <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Choose A Day
  </button>
  <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
    <a class="dropdown-item" value="Monday" >Monday</a>
    <a class="dropdown-item" value="Tuesday" >Tuesday</a>
    <a class="dropdown-item" value="Wednesday" >Wednesday</a>
    <a class="dropdown-item" value="Thursday">Thursday</a>
    <a class="dropdown-item" value="Friday">Friday</a>
    <a class="dropdown-item" value="Saturday">Saturday</a>
  </div>
</div>

And I also have a empty table:

<table border="2">
  <thead>
    <tr>
      <td>Lesson_id</td>
      <td>Teacher</td>
      <td>Lesson</td>
      <td>Day</td>
      <td>Time</td>
      <td>Classroom</td>
      <td>Year</td>
      <td>Curriculum</td>
    </tr>
  </thead>
  <tbody>


  </tbody>
</table>

And I have a php function:

<?php
function get_data_from_day($day)
{
include('dbh.inc.php');
global $conn;
$query = "SELECT * FROM  ";
$result = $conn->query($query);
while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
    echo "<tr>";
    echo "<td>" . $row['Lesson_id'] . "</td>";
    echo "<td>" . $row['Teacher'] . "</td>";
    echo "<td>" . $row['Lesson'] . "</td>";
    echo "<td>" . $row['Day'] . "</td>";
    echo "<td>" . $row['Time'] . "</td>";
    echo "<td>" . $row['Classroom'] . "</td>";
    echo "<td>" . $row['Year'] . "</td>";
    echo "<td>" . $row['Curriculum'] . "</td>";
    echo "</tr>";
}
}

Finally I have a database name school.Inside that is 6 table from monday to friday.I want to retrieve data from the database when click the drop-down menu.For example, if I click the monday button will return all data from table monday and so on. Is there any solution for this

Answer 1

I don't think you will be able to do it with php, because php runs before the page is loaded in the server. Instead I would use javascript or jquery; I found here:

How to get data from database in javascript based on the value passed to the function

How to get data from database in javascript.

I think you could use something similar to this:

https://developer.apple.com/library/content/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html

First open the database:

try {
    if (!window.openDatabase) {
        alert('not supported');
    } else {
        var shortName = 'mydatabase';
        var version = '1.0';
        var displayName = 'My Important Database';
        var maxSize = 65536; // in bytes
        var db = openDatabase(shortName, version, displayName, maxSize);

        // You should have a database instance in db.
    }
} catch(e) {
    // Error handling code goes here.
    if (e == 2) {
        // Version number mismatch.
        alert("Invalid database version.");
    } else {
        alert("Unknown error "+e+".");
    }
    return;
}

Then you can create a function where you have your SQL query:

function errorHandler(transaction, error)
{
    // error.message is a human-readable string.
    // error.code is a numeric error code
    alert('Oops.  Error was '+error.message+' (Code '+error.code+')');

    // Handle errors here
    var we_think_this_error_is_fatal = true;
    if (we_think_this_error_is_fatal) return true;
    return false;
}

function dataHandler(transaction, results)
{
    // Handle the results
    var string = "Green shirt list contains the following people:\n\n";
    for (var i=0; i<results.rows.length; i++) {
        // Each row is a standard JavaScript array indexed by
        // column names.
        var row = results.rows.item(i);
        string = string + row['name'] + " (ID "+row['id']+")\n";
    }
    alert(string);
}
function getSQLData(day){
db.transaction(
    function (transaction) {
        transaction.executeSql("SELECT * from " + day + ";",
            [], // array of values for the ? placeholders
            dataHandler, errorHandler);
    }
);
}

Then you can call the function like this:

 <a class="dropdown-item" value="Monday" onClick="javascript:getSQLData('Monday');" >Monday</a>

Hope this can give you an idea about how you could do it.