I currently have an sql table that can be filtered with a html dropdown. For my site, the sql table is used so the user can click on one of the columns and add it as an exercise. What I want to happen when the user clicks on the column, is for the box above to be filled in with what the data on the column says.
For example, if the user selected ‘Barbell Curl’, then ‘Barbell Curl’ would be displayed in the box above that says ‘Exercise’ and also the ‘Muscle’ and ‘Push/Pull’ boxes would be filled in with the corresponding details.
Can this be done?
Thanks
<?php
class DBController {
private $host = "sql306.byetcluster.com";
private $user = "icei_32733650";
private $password = "ZoD473049gais";
private $database = "icei_32733650_gym_exercises";
private $conn;
function __construct() {
$this->conn = $this->connectDB();
}
function connectDB() {
$conn = mysqli_connect($this->host,$this->user,$this->password,$this->database);
return $conn;
}
function runQuery($query) {
$result = mysqli_query($this->conn,$query);
while($row=mysqli_fetch_assoc($result)) {
$resultset[] = $row;
}
if(!empty($resultset))
return $resultset;
}
}
$db_handle = new DBController();
$Muscle_NameResult = $db_handle->runQuery("SELECT DISTINCT Muscle_Name FROM gym_exercises ORDER BY Muscle_Name ASC");
?>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./style/css-reset.css">
<style>
.addExercise2 { display: none; }
.addExercise3 { display: none; }
.addExercise4 { display: none; }
.addExercise5 { display: none; }
.addExercise6 { display: none; }
.addExercise7 { display: none; }
.addExercise8 { display: none; }
.addExercise9 { display: none; }
.addExercise10 { display: none; }
.addExercise11 { display: none; }
.addExercise12 { display: none; }
.addExercise13 { display: none; }
.addExercise14 { display: none; }
.addExercise15 { display: none; }
.addExercise16 { display: none; }
.addExercise17 { display: none; }
.addExercise18 { display: none; }
.addExercise19 { display: none; }
.addExercise20 { display: none; }
.addExercise21 { display: none; }
.addExercise22 { display: none; }
.addExercise23 { display: none; }
.addExercise24 { display: none; }
.addExercise25 { display: none; }
.addExercise26 { display: none; }
.addExercise27 { display: none; }
.addExercise28 { display: none; }
.addExercise29 { display: none; }
.addExercise30 { display: none; }
</style>
</head>
Welcome to Wired Workout<br>
Add your exercises<br>
<div id="addExercise1">
Exercise<input type="text" id="Name1"><br>
Muscle<input type="text" id="Muscle1"><br>
Push/Pull<input type="text" id="PP1"><br>
Sets<input type="text" id="Sets1"><br>
Reps<input type="text" id="Reps1"><br>
<button onclick="addMore1()">+ Exercise</button>
</div>
<div id="addExercise2" class="addExercise2">
Exercise<input type="text" id="Name2"><br>
Muscle<input type="text" id="Muscle2"><br>
Push/Pull<input type="text" id="PP2"><br>
Sets<input type="text" id="Sets2"><br>
Reps<input type="text" id="Reps2"><br>
<button onclick="addMore2()">+ Exercise</button>
<button onclick="hideMore1()">- Exercise</button>
</div>
<div id="addExercise3" class="addExercise3">
Exercise<input type="text" id="Name3"><br>
Muscle<input type="text" id="Muscle3"><br>
Push/Pull<input type="text" id="PP3"><br>
Sets<input type="text" id="Sets3"><br>
Reps<input type="text" id="Reps3"><br>
<button onclick="addMore3()">+ Exercise</button>
<button onclick="hideMore2()">- Exercise</button>
</div>
<div id="addExercise4" class="addExercise4">
Exercise<input type="text" id="Name4"><br>
Muscle<input type="text" id="Muscle4"><br>
Push/Pull<input type="text" id="PP4"><br>
Sets<input type="text" id="Sets4"><br>
Reps<input type="text" id="Reps4"><br>
<button onclick="addMore4()">+ Exercise</button>
<button onclick="hideMore3()">- Exercise</button>
</div>
<div id="addExercise5" class="addExercise5">
Exercise<input type="text" id="Name5"><br>
Muscle<input type="text" id="Muscle5"><br>
Push/Pull<input type="text" id="PP5"><br>
Sets<input type="text" id="Sets5"><br>
Reps<input type="text" id="Reps5"><br>
<button onclick="addMore5()">+ Exercise</button>
<button onclick="hideMore4()">- Exercise</button>
</div>
<div id="addExercise6" class="addExercise6">
Exercise<input type="text" id="Name6"><br>
Muscle<input type="text" id="Muscle6"><br>
Push/Pull<input type="text" id="PP6"><br>
Sets<input type="text" id="Sets6"><br>
Reps<input type="text" id="Reps6"><br>
<button onclick="addMore6()">+ Exercise</button>
<button onclick="hideMore5()">- Exercise</button>
</div>
<div id="addExercise7" class="addExercise7">
Exercise<input type="text" id="Name7"><br>
Muscle<input type="text" id="Muscle7"><br>
Push/Pull<input type="text" id="PP7"><br>
Sets<input type="text" id="Sets7"><br>
Reps<input type="text" id="Reps7"><br>
<button onclick="addMore7()">+ Exercise</button>
<button onclick="hideMore6()">- Exercise</button>
</div>
<div id="addExercise8" class="addExercise8">
Exercise<input type="text" id="Name8"><br>
Muscle<input type="text" id="Muscle8"><br>
Push/Pull<input type="text" id="PP8"><br>
Sets<input type="text" id="Sets8"><br>
Reps<input type="text" id="Reps8"><br>
<button onclick="addMore8()">+ Exercise</button>
<button onclick="hideMore7()">- Exercise</button>
</div>
<div id="addExercise9" class="addExercise9">
Exercise<input type="text" id="Name9"><br>
Muscle<input type="text" id="Muscle9"><br>
Push/Pull<input type="text" id="PP9"><br>
Sets<input type="text" id="Sets9"><br>
Reps<input type="text" id="Reps9"><br>
<button onclick="addMore9()">+ Exercise</button>
<button onclick="hideMore8()">- Exercise</button>
</div>
<div id="addExercise10" class="addExercise10">
Exercise<input type="text" id="Name10"><br>
Muscle<input type="text" id="Muscle10"><br>
Push/Pull<input type="text" id="PP10"><br>
Sets<input type="text" id="Sets10"><br>
Reps<input type="text" id="Reps10"><br>
<button onclick="addMore10()">+ Exercise</button>
<button onclick="hideMore9()">- Exercise</button>
</div>
<div id="addExercise11" class="addExercise11">
Exercise<input type="text" id="Name11"><br>
Muscle<input type="text" id="Muscle11"><br>
Push/Pull<input type="text" id="PP11"><br>
Sets<input type="text" id="Sets11"><br>
Reps<input type="text" id="Reps11"><br>
<button onclick="addMore11()">+ Exercise</button>
<button onclick="hideMore10()">- Exercise</button>
</div>
<div id="addExercise12" class="addExercise12">
Exercise<input type="text" id="Name12"><br>
Muscle<input type="text" id="Muscle12"><br>
Push/Pull<input type="text" id="PP12"><br>
Sets<input type="text" id="Sets12"><br>
Reps<input type="text" id="Reps12"><br>
<button onclick="addMore12()">+ Exercise</button>
<button onclick="hideMore11()">- Exercise</button>
</div>
<div id="addExercise13" class="addExercise13">
Exercise<input type="text" id="Name13"><br>
Muscle<input type="text" id="Muscle13"><br>
Push/Pull<input type="text" id="PP13"><br>
Sets<input type="text" id="Sets13"><br>
Reps<input type="text" id="Reps13"><br>
<button onclick="addMore13()">+ Exercise</button>
<button onclick="hideMore12()">- Exercise</button>
</div>
<div id="addExercise14" class="addExercise14">
Exercise<input type="text" id="Name14"><br>
Muscle<input type="text" id="Muscle14"><br>
Push/Pull<input type="text" id="PP14"><br>
Sets<input type="text" id="Sets14"><br>
Reps<input type="text" id="Reps14"><br>
<button onclick="addMore14()">+ Exercise</button>
<button onclick="hideMore13()">- Exercise</button>
</div>
<div id="addExercise15" class="addExercise15">
Exercise<input type="text" id="Name15"><br>
Muscle<input type="text" id="Muscle15"><br>
Push/Pull<input type="text" id="PP15"><br>
Sets<input type="text" id="Sets15"><br>
Reps<input type="text" id="Reps15"><br>
<button onclick="addMore15()">+ Exercise</button>
<button onclick="hideMore14()">- Exercise</button>
</div>
<div id="addExercise16" class="addExercise16">
Exercise<input type="text" id="Name16"><br>
Muscle<input type="text" id="Muscle16"><br>
Push/Pull<input type="text" id="PP16"><br>
Sets<input type="text" id="Sets16"><br>
Reps<input type="text" id="Reps16"><br>
<button onclick="addMore16()">+ Exercise</button>
<button onclick="hideMore15()">- Exercise</button>
</div>
<div id="addExercise17" class="addExercise17">
Exercise<input type="text" id="Name17"><br>
Muscle<input type="text" id="Muscle17"><br>
Push/Pull<input type="text" id="PP17"><br>
Sets<input type="text" id="Sets17"><br>
Reps<input type="text" id="Reps17"><br>
<button onclick="addMore17()">+ Exercise</button>
<button onclick="hideMore16()">- Exercise</button>
</div>
<div id="addExercise18" class="addExercise18">
Exercise<input type="text" id="Name18"><br>
Muscle<input type="text" id="Muscle18"><br>
Push/Pull<input type="text" id="PP18"><br>
Sets<input type="text" id="Sets18"><br>
Reps<input type="text" id="Reps18"><br>
<button onclick="addMore18()">+ Exercise</button>
<button onclick="hideMore17()">- Exercise</button>
</div>
<div id="addExercise19" class="addExercise19">
Exercise<input type="text" id="Name19"><br>
Muscle<input type="text" id="Muscle19"><br>
Push/Pull<input type="text" id="PP19"><br>
Sets<input type="text" id="Sets19"><br>
Reps<input type="text" id="Reps19"><br>
<button onclick="addMore19()">+ Exercise</button>
<button onclick="hideMore18()">- Exercise</button>
</div>
<div id="addExercise20" class="addExercise20">
Exercise<input type="text" id="Name20"><br>
Muscle<input type="text" id="Muscle20"><br>
Push/Pull<input type="text" id="PP20"><br>
Sets<input type="text" id="Sets20"><br>
Reps<input type="text" id="Reps20"><br>
<button onclick="addMore20()">+ Exercise</button>
<button onclick="hideMore19()">- Exercise</button>
</div>
<div id="addExercise21" class="addExercise21">
Exercise<input type="text" id="Name21"><br>
Muscle<input type="text" id="Muscle21"><br>
Push/Pull<input type="text" id="PP21"><br>
Sets<input type="text" id="Sets21"><br>
Reps<input type="text" id="Reps21"><br>
<button onclick="addMore21()">+ Exercise</button>
<button onclick="hideMore20()">- Exercise</button>
</div>
<div id="addExercise22" class="addExercise22">
Exercise<input type="text" id="Name22"><br>
Muscle<input type="text" id="Muscle22"><br>
Push/Pull<input type="text" id="PP22"><br>
Sets<input type="text" id="Sets22"><br>
Reps<input type="text" id="Reps22"><br>
<button onclick="addMore22()">+ Exercise</button>
<button onclick="hideMore21()">- Exercise</button>
</div>
<div id="addExercise23" class="addExercise23">
Exercise<input type="text" id="Name23"><br>
Muscle<input type="text" id="Muscle23"><br>
Push/Pull<input type="text" id="PP23"><br>
Sets<input type="text" id="Sets23"><br>
Reps<input type="text" id="Reps23"><br>
<button onclick="addMore23()">+ Exercise</button>
<button onclick="hideMore22()">- Exercise</button>
</div>
<div id="addExercise24" class="addExercise24">
Exercise<input type="text" id="Name24"><br>
Muscle<input type="text" id="Muscle24"><br>
Push/Pull<input type="text" id="PP24"><br>
Sets<input type="text" id="Sets24"><br>
Reps<input type="text" id="Reps24"><br>
<button onclick="addMore24()">+ Exercise</button>
<button onclick="hideMore23()">- Exercise</button>
</div>
<div id="addExercise25" class="addExercise25">
Exercise<input type="text" id="Name25"><br>
Muscle<input type="text" id="Muscle25"><br>
Push/Pull<input type="text" id="PP25"><br>
Sets<input type="text" id="Sets25"><br>
Reps<input type="text" id="Reps25"><br>
<button onclick="addMore25()">+ Exercise</button>
<button onclick="hideMore24()">- Exercise</button>
</div>
<div id="addExercise26" class="addExercise26">
Exercise<input type="text" id="Name26"><br>
Muscle<input type="text" id="Muscle26"><br>
Push/Pull<input type="text" id="PP26"><br>
Sets<input type="text" id="Sets26"><br>
Reps<input type="text" id="Reps26"><br>
<button onclick="addMore26()">+ Exercise</button>
<button onclick="hideMore25()">- Exercise</button>
</div>
<div id="addExercise27" class="addExercise27">
Exercise<input type="text" id="Name27"><br>
Muscle<input type="text" id="Muscle27"><br>
Push/Pull<input type="text" id="PP27"><br>
Sets<input type="text" id="Sets27"><br>
Reps<input type="text" id="Reps27"><br>
<button onclick="addMore27()">+ Exercise</button>
<button onclick="hideMore26()">- Exercise</button>
</div>
<div id="addExercise28" class="addExercise28">
Exercise<input type="text" id="Name28"><br>
Muscle<input type="text" id="Muscle28"><br>
Push/Pull<input type="text" id="PP28"><br>
Sets<input type="text" id="Sets28"><br>
Reps<input type="text" id="Reps28"><br>
<button onclick="addMore28()">+ Exercise</button>
<button onclick="hideMore27()">- Exercise</button>
</div>
<div id="addExercise29" class="addExercise29">
Exercise<input type="text" id="Name29"><br>
Muscle<input type="text" id="Muscle29"><br>
Push/Pull<input type="text" id="PP29"><br>
Sets<input type="text" id="Sets29"><br>
Reps<input type="text" id="Reps29"><br>
<button onclick="addMore29()">+ Exercise</button>
<button onclick="hideMore28()">- Exercise</button>
</div>
<div id="addExercise30" class="addExercise30">
Exercise<input type="text" id="Name30"><br>
Muscle<input type="text" id="Muscle30"><br>
Push/Pull<input type="text" id="PP30"><br>
Sets<input type="text" id="Sets30"><br>
Reps<input type="text" id="Reps30"><br>
<button onclick="hideMore29()">- Exercise</button>
</div>
<span id="Meal" class="Meal">
Exercises: <span id="Exercises"></span><br>
Muscles: <span id="Muscles"></span><br>
Sets: <span id="Sets"></span><br>
Reps: <span id="Reps"></span><br>
</span>
<button onclick="Cookies();">Submit</button>
<body>
<script>
function addMore1() { document.getElementById("addExercise2").style.display="block"; }
function addMore2() { document.getElementById("addExercise3").style.display="block"; }
function addMore3() { document.getElementById("addExercise4").style.display="block"; }
function addMore4() { document.getElementById("addExercise5").style.display="block"; }
function addMore5() { document.getElementById("addExercise6").style.display="block"; }
function addMore6() { document.getElementById("addExercise7").style.display="block"; }
function addMore7() { document.getElementById("addExercise8").style.display="block"; }
function addMore8() { document.getElementById("addExercise9").style.display="block"; }
function addMore9() { document.getElementById("addExercise10").style.display="block"; }
function addMore10() { document.getElementById("addExercise11").style.display="block"; }
function addMore11() { document.getElementById("addExercise12").style.display="block"; }
function addMore12() { document.getElementById("addExercise13").style.display="block"; }
function addMore13() { document.getElementById("addExercise14").style.display="block"; }
function addMore14() { document.getElementById("addExercise15").style.display="block"; }
function addMore15() { document.getElementById("addExercise16").style.display="block"; }
function addMore16() { document.getElementById("addExercise17").style.display="block"; }
function addMore17() { document.getElementById("addExercise18").style.display="block"; }
function addMore18() { document.getElementById("addExercise19").style.display="block"; }
function addMore19() { document.getElementById("addExercise20").style.display="block"; }
function addMore20() { document.getElementById("addExercise21").style.display="block"; }
function addMore21() { document.getElementById("addExercise22").style.display="block"; }
function addMore22() { document.getElementById("addExercise23").style.display="block"; }
function addMore23() { document.getElementById("addExercise24").style.display="block"; }
function addMore24() { document.getElementById("addExercise25").style.display="block"; }
function addMore25() { document.getElementById("addExercise26").style.display="block"; }
function addMore26() { document.getElementById("addExercise27").style.display="block"; }
function addMore27() { document.getElementById("addExercise28").style.display="block"; }
function addMore28() { document.getElementById("addExercise29").style.display="block"; }
function addMore29() { document.getElementById("addExercise30").style.display="block"; }
function hideMore1() { document.getElementById("addExercise2").style.display="none"; }
function hideMore2() { document.getElementById("addExercise3").style.display="none"; }
function hideMore3() { document.getElementById("addExercise4").style.display="none"; }
function hideMore4() { document.getElementById("addExercise5").style.display="none"; }
function hideMore5() { document.getElementById("addExercise6").style.display="none"; }
function hideMore6() { document.getElementById("addExercise7").style.display="none"; }
function hideMore7() { document.getElementById("addExercise8").style.display="none"; }
function hideMore8() { document.getElementById("addExercise9").style.display="none"; }
function hideMore9() { document.getElementById("addExercise10").style.display="none"; }
function hideMore10() { document.getElementById("addExercise11").style.display="none"; }
function hideMore11() { document.getElementById("addExercise12").style.display="none"; }
function hideMore12() { document.getElementById("addExercise13").style.display="none"; }
function hideMore13() { document.getElementById("addExercise14").style.display="none"; }
function hideMore14() { document.getElementById("addExercise15").style.display="none"; }
function hideMore15() { document.getElementById("addExercise16").style.display="none"; }
function hideMore16() { document.getElementById("addExercise17").style.display="none"; }
function hideMore17() { document.getElementById("addExercise18").style.display="none"; }
function hideMore18() { document.getElementById("addExercise19").style.display="none"; }
function hideMore19() { document.getElementById("addExercise20").style.display="none"; }
function hideMore20() { document.getElementById("addExercise21").style.display="none"; }
function hideMore21() { document.getElementById("addExercise22").style.display="none"; }
function hideMore22() { document.getElementById("addExercise23").style.display="none"; }
function hideMore23() { document.getElementById("addExercise24").style.display="none"; }
function hideMore24() { document.getElementById("addExercise25").style.display="none"; }
function hideMore25() { document.getElementById("addExercise26").style.display="none"; }
function hideMore26() { document.getElementById("addExercise27").style.display="none"; }
function hideMore27() { document.getElementById("addExercise28").style.display="none"; }
function hideMore28() { document.getElementById("addExercise29").style.display="none"; }
function hideMore29() { document.getElementById("addExercise30").style.display="none"; }
</script>
<form method="POST" name="search" action="add-exercise.php">
<div id="demo-grid">
<div class="search-box">
<select id="Place" name="Muscle_Name[]" multiple="multiple">
<option value="0" selected="selected">Select Muscle_Name</option>
<?php
if (! empty($Muscle_NameResult)) {
foreach ($Muscle_NameResult as $key => $value) {
echo '<option value="' . $Muscle_NameResult[$key]['Muscle_Name'] . '">' . $Muscle_NameResult[$key]['Muscle_Name'] . '</option>';
}
}
?>
</select><br> <br>
<button id="Filter">Search</button>
</div>
<?php
if (! empty($_POST['Muscle_Name'])) {
?>
<table cellpadding="10" cellspacing="1">
<thead>
<tr>
<th><strong>Exercise</strong></th>
<th><strong>Muscle</strong></th>
<th><strong>Push/Pull/Static</strong></th>
</tr>
</thead>
<tbody>
<?php
$query = "SELECT * from gym_exercises";
$i = 0;
$selectedOptionCount = count($_POST['Muscle_Name']);
$selectedOption = "";
while ($i < $selectedOptionCount) {
$selectedOption = $selectedOption . "'" . $_POST['Muscle_Name'][$i] . "'";
if ($i < $selectedOptionCount - 1) {
$selectedOption = $selectedOption . ", ";
}
$i ++;
}
$query = $query . " WHERE Muscle_Name in (" . $selectedOption . ")";
$result = $db_handle->runQuery($query);
}
if (! empty($result)) {
foreach ($result as $key => $value) {
?>
<tr>
<td><div class="col" id="user_data_1"><?php echo $result[$key]['Exercise_Name']; ?></div></td>
<td><div class="col" id="user_data_2"><?php echo $result[$key]['Muscle_Name']; ?> </div></td>
<td><div class="col" id="user_data_3"><?php echo $result[$key]['PPS']; ?> </div></td>
</tr>
<?php
}
?>
</tbody>
</table>
<?php
}
?>
</div>
</form>
</body>
</html>