Determining next selection menu by previous selection - php

Question

I have 3 select drop downs which I want when the first one selected, the second shows up, and when the second is selected, the third one shows up, by using if(isset($_post[first_one])) and for the third one using if(isset($_post[second_one]))
SQL:
$conn = new mysqli($servername, $username, $password, $dbname);
$sql = "SELECT * FROM sp_meeting_log ";
$result1 = $conn->query($sql);
PHP/HTML:
<div style="position:absolute; top:300px; left:500px;">
<form method="post">
<p>Choose:</p>
<!--Get all orgs ,forums ,Users data available for admin-->
//select the first
<select style="display:inline-block;" name="org">
<option value="All Orgs">All Orgs</option>
//first drop down info release
<?php
if ($result1->num_rows > 0) {
echo "<table><tr><th>orgID</th><th>orgName</th></tr>";
// output data of each row
while($row = $result1->fetch_assoc()) {
echo "<option>" .$row["orgID"]." /".$row["orgName"]."</option>";
}
echo "</table>";
} else {
echo "0 results";
}
?>
</select>
<select style="display:inline-block;" name="forum">
<option value="forum1"><h5>All Forums</h5></option>
<?php
// if the first dropdown post set
if(isset($_POST['org'])){
$result2 = $conn->query($sql);
if ($result2->num_rows > 0) {
echo "<table><tr><th>forumID</th><th>forumName</th></tr>";
// output data of each row
while($row = $result2->fetch_assoc()) {
echo "<option>".$row["forumID"]." / ".$row["forumName"]."</option>";
}
echo "</table>";
} else {
echo "0 results";
}
}
?>
</select>
//select the second
<select style="display:inline-block;" name="user">
<option><h5>All Users</h5></option>
<?php
// if the second drop down is set
if(isset($_POST['forum'])){
$result3 = $conn->query($sql);
if ($result3->num_rows > 0) {
echo "<table><tr><th>userID</th><th>username</th></tr>";
// output data of each row
while($row = $result3->fetch_assoc()) {
echo "<option>".$row["userID"]." / ".$row["username"]. "</option>";
}
echo "</table>";
} else {
echo "0 results";
}
}
?>

Answer 1

Essentially this is what the idea is. You want page one to just fetch from page two and post the result back to page one into the correct spots:
page1.php
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<form>
<label>Org
<select id="org" name="org">
<option value="1">One</option>
<option value="2">Two</option>
</select>
</label>
<!-- This is where the forum html will drop into after ajax runs -->
<div id="forum"></div>
<!-- This is where the user html will drop into after ajax runs -->
<div id="user"></div>
</form>
<script type="text/javascript">
$(document).ready(function() {
// On change of a select menu
$(this).on('change','select',function(e){
// Assign selection
var thisSelect = $(this);
// Get the id name, this will tell page two
// what it's receiving
var sendType = thisSelect.attr('id');
// Get the actual value of the selection
var sendVal = thisSelect.val();
// Create essentially a POST
var sendData = { field: sendType, value: sendVal };
$.ajax({
// Send to page 2
url : '/page2.php',
// Use post method
type: "POST",
// Use post data from above
data : sendData,
// This is what will run on success
success:function(response){
// Parse the json coming back for placement
var jSon = JSON.parse(response);
// Save the correct html into the correct drop spot
$('#'+jSon.type).html(jSon.html);
},
error: function(response){
console.log(response);
}
});
});
});
</script>
page2.php
if(!empty($_POST)) {
$data = '';
ob_start();
if(isset($_POST['field'])) {
if($_POST['field'] == 'org') {
$type = 'forum';
?>
<label>Forum
<select id="forum" name="forum">
<option value="1">One</option>
<option value="2">Two</option>
</select>
</label>
<?php
}
elseif($_POST['field'] == 'forum') {
$type = 'user';
?>
<label>user
<select id="user" name="user">
<option value="1">One</option>
<option value="2">Two</option>
</select>
</label>
<?php }
$data = ob_get_contents();
ob_end_clean();
die(json_encode(array('type'=>$type,'html'=>$data)));
}
die(json_encode(array('type'=>'error','html'=>false)));
}