I have a search button that contains options and each option will show data according to its corresponding query, the thing is i want to make some sub-options for certain options that looks like when you right click the desktop windows it shows a list and some elements contain more elements inside them
this is what i’m working on:
this is what i want to do:
and this is my code
<?php
// Assuming you have a database connection
// Replace these values with your actual database credentials
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "stage";
// Create a connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check the connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$output = "";
// Handle form submission
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$search1 = $_POST["search1"];
$search2 = $_POST["search2"];
// Perform different queries based on the selected options
if ($search1 === 'finance') {
if ($search2 === 'Clients') {
$queryName = "Total Clients";
$query = "SELECT count(id_client) as Total_Clients FROM `client`;";
$result = $conn->query($query);
$output = displaycount($queryName, $result);
} elseif ($search2 === 'Total_Devis') {
$queryName = "Total Devis";
$query = "SELECT ROUND(SUM(totale_devis) , 3) as Total_Devis FROM `devis_client`;";
$result = $conn->query($query);
$output = displaycount($queryName, $result);
} elseif ($search2 === 'societe') {
$queryName = "Total Societes";
$query = "SELECT count(id_societe) as Total_Societés from societe;";
$result = $conn->query($query);
$output = displaycount($queryName, $result);
} elseif ($search2 === 'fournisseurs') {
$queryName = "Total Fournisseurs";
$query = "SELECT count(id_fournisseur) as Total_Fournisseurs FROM `fournisseur`;";
$result = $conn->query($query);
$output = displaycount($queryName, $result);
} elseif ($search2 === 'produit') {
$queryName = "Total Produit";
$query = "SELECT COUNT(id_produit) as Nom FROM produit;";
$result = $conn->query($query);
$output = displaycount($queryName, $result);
}
} elseif ($search1 === 'crm') {
if ($search2 === 'leads') {
$queryName = "Total Leads";
$query = "SELECT COUNT(id_task) as Total_Leads FROM `lead`;";
$result = $conn->query($query);
$output = displaycount($queryName, $result);
} elseif ($search2 === 'opportunites') {
$queryName = "Total Opportunites";
$query = "SELECT count(id) as Total_Opportunités FROM `opportunite`;";
$result = $conn->query($query);
$output = displaycount($queryName, $result);
} elseif ($search2 === 'cases') {
$queryName = "Total Cases";
$query = "SELECT COUNT(id_case) as Total_Cases FROM `cases`;";
$result = $conn->query($query);
$output = displaycount($queryName, $result);
} elseif ($search2 === 'contacts') {
$queryName = "Total Contacts";
$query = "SELECT count(id_contact) as Total_Contacts FROM `contact`;";
$result = $conn->query($query);
$output = displaycount($queryName, $result);
} elseif ($search2 === 'contrats') {
$queryName = "Total Contrats";
$query = "SELECT COUNT(id_contrat) as Total_Contrats FROM `contrat_client`;";
$result = $conn->query($query);
$output = displaycount($queryName, $result);
}
} elseif ($search1 === 'projets') {
if ($search2 === 'projets') {
$queryName = "Total Projets";
$query = "SELECT COUNT(id_project) as Total_Projets FROM `projects`;";
$result = $conn->query($query);
$output = displaycount($queryName, $result);
}
}
}
// Function to display the query result
function displaycount($queryName, $result) {
$output = "";
if($result->num_rows > 0){
$output .= "<ul>"; // Start an unordered list for multiple rows
// Get column names from the result set metadata
$columns = $result->fetch_fields();
$columnNames = array_map(function ($column) {
return $column->name;
}, $columns);
while ($row = $result->fetch_assoc()) {
// Display values for each column dynamically
$output .= "<li>";
foreach ($columnNames as $columnName) {
$output .= "$columnName: " . $row[$columnName] . " | ";
}
$output = rtrim($output, ' | '); // Remove the trailing comma and space
$output .= "</li>";
}
$output .= "</ul>"; // Close the unordered list
}else {
$output .= "<strong>No results found.</strong></p>";
}
return $output;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.dropdown-container {
display: inline-block;
margin-right: 5px;
}
select {
margin: 0;
padding: 5px;
}
</style>
</head>
<body>
<h2>Formulaire</h2>
<form method="post" action="">
<label for="search1">Search 1:</label>
<div class="dropdown-container">
<li style="list-style-type: none;">
<select id="search1" name="search1" onchange="updateSearch2Options()">
<option value="" disabled selected>Choisissez une option</option>
<option value="finance">Finance</option>
<option value="crm">CRM</option>
<option value="projets">Projet</option>
</select>
</li>
</div>
<label for="search2">Search 2:</label>
<div class="dropdown-container">
<li style="list-style-type: none;">
<select id="search2" name="search2">
</select>
</li>
</div>
<input type="submit" value="Search">
</form>
<?php echo $output; ?>
<script>
var optionsMapping = {
'finance': {
'Clients': {
'Sub-Options': ['annee', 'devis', 'total'],
},
'Total_Devis': [],
'societe': [],
'fournisseurs': [],
'produit': [],
},
'crm': {
'leads': [],
'opportunites': [],
'cases': [],
'contacts': [],
'contrats': [],
},
'projets': {
'projets': [],
},
};
function updateSearch2Options() {
var search1Value = document.getElementById('search1').value;
var search2Select = document.getElementById('search2');
// Clear existing options
search2Select.innerHTML = '';
// Get options for the selected value in search1
var options = optionsMapping[search1Value];
// Add new options based on the selected value in search1
addOptions(search2Select, Object.keys(options));
// Check if there are sub-options and update the second dropdown accordingly
var selectedSearch2Value = search2Select.value;
if (options[selectedSearch2Value] && Array.isArray(options[selectedSearch2Value])) {
addOptions(search2Select, options[selectedSearch2Value]);
}
}
function addOptions(selectElement, optionsArray) {
for (var i = 0; i < optionsArray.length; i++) {
addOption(selectElement, optionsArray[i]);
}
}
function addOption(selectElement, optionValue) {
var option = document.createElement('option');
option.value = optionValue;
option.text = optionValue;
selectElement.appendChild(option);
}
// Initial call to populate the second dropdown
updateSearch2Options();
</script>
</body>
</html>