I'm trying to create a file sharing page for users on a website. Depending on their role they can see different folders. When I wrote everything in html it functioned fine, there are three buttons on the side for each folder but my javascript function hid the ones that were not clicked on. When I put everything in php essentially just echoing it all this stopped working and all the folders were shown. I need to put it in php because I need to show different things for different users. This is the code:
echo "
<!DOCTYPE html>
<html>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' href='../styles/style.css'>
<body>
<header>
<h1>Dundas Agri Systems Employee Page</h1>
<h2>Always search for a Spirit of Tranquility</h2>
</header>";
echo "<div class='tab'>";
if ($_SESSION["role"]==admin || $_SESSION["role"]==tech || $_SESSION["role"]==emp){
echo "<button class=''tablinks'' onclick=''OpenFolder(event, 'Employee')'' id=''defaultOpen''>Employee</button>";
}
if ($_SESSION["role"]==admin || $_SESSION["role"]==tech){
echo "<button class=''tablinks' onclick=''openFolder(event, 'Lely')''>Lely</button>";
}
if ($_SESSION["role"]==admin){
echo "<button class='tablinks' onclick='openFolder(event, 'Manager')''>Manager</button>";
}
echo "</div>";
if ($_SESSION["role"]==admin || $_SESSION["role"]==tech){
echo "<div id='Lely' class='tabcontent'>
<div id='container'>
<h1>Directory Contents</h1>
<table class='sortable'>
<thead>
<tr>
<th>Filename</th>
<th>Type</th>
<th>Size <small>(bytes)</small></th>
<th>Date Modified</th>
<th></th>
</tr>
</thead>
<tbody>
";
openfilesystem('./LelyUploads');
echo "
</tbody>
</table>
<div id='Upload'>
<form action='' method ='post' enctype='multipart/form-data'>
Select a file to upload:
<input type='file' name='fileToUpload' id='fileToUpload'>
<input type='submit' value='Submit' name='submit' id='submit'>
</form>
</div>
</div>
</div>";
}
if ($_SESSION["role"]==admin || $_SESSION["role"]==tech || $_SESSION["role"]==emp){
echo "<div id='Employee' class='tabcontent'>
<div id='container'>
<h1>Directory Contents</h1>
<table class='sortable'>
<thead>
<tr>
<th>Filename</th>
<th>Type</th>
<th>Size <small>(bytes)</small></th>
<th>Date Modified</th>
<th></th>
</tr>
</thead>
<tbody>
";
openfilesystem('./uploads');
echo "
</tbody>
</table>
<div id='Upload'>
<form action='' method ='post' enctype='multipart/form-data'>
Select a file to upload:
<input type='file' name='fileToUpload' id='fileToUpload'>
<input type='submit' value='Submit' name='submit' id='submit'>
</form>
</div>
</div>
</div>";
}
if ($_SESSION["role"]==admin){
echo "<div id='Manager' class='tabcontent'>
<div id='container'>
<h1>Directory Contents</h1>
<table class='sortable'>
<thead>
<tr>
<th>Filename</th>
<th>Type</th>
<th>Size <small>(bytes)</small></th>
<th>Date Modified</th>
<th></th>
</tr>
</thead>
<tbody>
";
openfilesystem('./LelyUploads');
echo "
</tbody>
</table>
<div id='Upload'>
<form action='' method ='post' enctype='multipart/form-data'>
Select a file to upload:
<input type='file' name='fileToUpload' id='fileToUpload'>
<input type='submit' value='Submit' name='submit' id='submit'>
</form>
</div>
</div>
</div>";
}
echo "
<script>
function openFolder(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName('tabcontent');
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = 'none';
}
tablinks = document.getElementsByClassName('tablinks');
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(' active', '');
}
document.getElementById(cityName).style.display = 'block';
evt.currentTarget.className += '' active';
}
// Get the element with id='defaultOpen' and click on it
// document.getElementById('defaultOpen').click();
</script>
</body>
</html>
";
The Key is the function OpenFolder which doesn't seem to be getting called properly or maybe not at all. I'm not an expert with PHP by any means so if there's another way to accomplish what I'm trying to do that would be great help as well!