get dropdown data on another dropdown change - php

Question

I have a drop down menu having column names same as they are in database table. I have inserted every column name in option tag of dropdown menu. These columns have number of rows in database.
After that, I have another drop down menu. I want to show all the data rows of the selected column in the previous drop down menu.
E.g. I have column names as a,b,c,d in the first drop down and every column has data in database table. So, If I select A in first drop down; It shows all the data rows of A in next drop down. Here is the code:
<select name="first">
<option selected="true" disabled="disabled">Select an Option</option>
<option value="select_all">Select All</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">c</option>
</select>
<?php
if(isset($_POST['first'])){
$first=$_POST['first'];
}
?>
<select name="firstres" id="firstres"><option style="display:none;" selected; value="">---Select an option---</option><?php
#mysql_connect('localhost', 'root', '');
#mysql_select_db('db');
$first=$_POST['first'];
$sql = "SELECT COLUMN_NAME FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_SCHEMA = 'db' AND TABLE_NAME = 'tbl' AND COLUMN_NAME LIKE '" . $_POST["first"] . "'";
$result = #mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo "<option value=' " . $row['first'] ."'>" . $row['first'] ."</option>";
}
?>
</select>
The problem is; I am not getting column rows in second drop down menu.

Answer 1

You need to use Ajax for this issue, here my code maybe you can use on your projects.
View Code
<select id="category">
<option value="1">Category</option>
<option value="2">Category 2</option>
<option value="3">Category 3</option>
</select>
<select id="sub_category">
<option>Chose Category</option>
</select>
Ajax Code
$(document).ready(function(){
$('#category').on('change',function(){
var category_id = $(this).val();
if(category_id){
$.ajax({
type:'POST',
url:'sub_category.php',
data: {
category_id : category_id
},
success:function(html){
$('#sub_category').html(html);
}
});
}else{
$('#sub_category').html('<option>Pilih Sub category Kelas</option>');
}
});
});
sub_category.php
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$category_id = $_POST['category_id'];
$sql = "SELECT id,sub_category FROM category where category_id = $category_id";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<option value='".$row["id"]."'>".$row["sub_category"]."</option>";
}
} else {
echo "<option>Empty Sub Category</option>";
}
$conn->close();
?>

Answer 2

First of all, I do recommend to stay in php for the whole code.
-> Make things easier for the future...
Example:
$output = <<< EOD
<option>Select an Option</option>
etc.
EOD;
echo $output;
Second, did you run through the code step by step?
what is the output for $first and $_POST['first']; ?
Are they correct?
Is the SQL statement correct?
Table and column names....
Third, I understand, that you want select from the first dropdown and than the output from the database should appear.
This won't work in that way. HTML is stateless. This means everything which has been send to client is no longer available for the server.
So you need to use some code to resend this information: For example JSON (AJAX) or via HTML (which is not so nice). Look here:
https://www.w3schools.com/js/js_ajax_intro.asp