Using php/javascript to make 3 dependent drop down menus that are populated from a MySQL database
Question
Using php/javascript to make 3 dependent drop down menus that are populated from a MySQL database
Hi! I am new to coding/web development. I know this is a popular topic and I have already spent hours reading forums and looking at sample code, however:
a) Examples I have found include data that is hard-coded and does not pull the data from a database, which is what I need to do. b) The examples also use extentions like mysql_query and mysql_fetch_assoc which are now deprecated. I think I need to use PDO but I am unfamiliar with that.
Here is some background about my database:
There is only one table in the database--"costs_table." The fields that I am trying to populate the drop downs with are "Subsystem," ,"Unit_Cost_element" and "Unit_Cost_component." There is a 1:M relationship between these fields- a subsystem has many elements, and an element has many components.
Here is the SQL statements for what I want the code to be doing for each drop down:
SELECT DISTINCT Subsytem FROM Costs_table;
SELECT DISTINCT Unit_Cost_Element FROM Costs_Table WHERE Subsystem = $SelectedSubsystem;
SELECT DISTINCT Unit_Cost_Component FROM Costs_Table WHERE Subsystem = $SelectedSubsystem AND Unit_Cost_Element = $SelectedElement;
I know I will eventually need arrays but I have never constructed an array before. The code I have so far is just the index page that creates the list boxes. Also I got this code from another forum so it may not be 100% in-line with what I need to do.
Anyways here is the code:
<?php
try {
$objDb = new PDO('mysql:host=localhost;dbname=unit_costs_db', 'username', 'password');
$objDb->exec('SET CHARACTER SET utf8');
$sql = "SELECT DISTINCT Subsystem, ID FROM costs_table ORDER BY Subsystem ASC";
$statement = $objDb->query($sql);
$list = $statement->fetchAll(PDO::FETCH_ASSOC);
}
catch(PDOException $e){
echo 'There was a problem';
}
?>
<!DOCTYPE HTML>
<html lang="en"
<head>
<meta charset="utf-8" />
<title> Dependable Dropdown menu</title>
<meta name="description" content="Dependable dropdown menu" />
<meta name="keywords" content="dependable dropdown menu" />
<link href="/css/6-19_core.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<form action="" method="post">
<select name="Subsystem" id="Subsystem" class="update">
<option value="">Select Subsystem</option>
<?php if (!empty($list)) {
foreach($list as $row) { ?>
<option value="<?php echo $row['ID']; ?>">
<?php echo $row['Subsystem']; ?>
</option>
<?php }
}
?>
</select>
</select>
<br>
<select name="Element" id="Element" class="update"
disabled="disabled">
<option value="">----</option>
</select>
<br>
<select name="Component" id="Component" class="update"
disabled="disabled">
<option value="">----</option>
</select>
</form>
</div>
<script src="/js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/js/6-19_core.js" type="text/javascript"></script>
</body>
</html>
Any help with what I need to add to make this work properly would be greatly appreciated!!! Thanks in advance :)
1 answers
solution1
0 2014-06-20 16:42:51
More on PDO prepared statements.
I am a relative novice with PHP/PDO, so if this answer can be improved, please let me know how.
Firstly, your connection needs to be improved. Use this:
try {
$objDb = new PDO('mysql:host=127.0.0.1;dbname=databaseName', 'user', 'password');
$objDb->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$objDb->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
} catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}
You need to use the execute object :) I would wrap it in a function. Something like this:
The function is written after your try closing brace } .
function querySelection($objDb,$sql) {
$statement = $objDb->prepare($sql); #prepare
$statement->execute(); #execute
$list = $statement->fetchAll(PDO::FETCH_ASSOC);
foreach($list as $row) {
echo '<option value=" ' . $row['ID'] . ' "> ' . $row['Subsystem'] . '</option>';
}
}
In your form:
<select>
<option value="0">----</option>
<?php
$sql = 'SELECT DISTINCT Subsystem, ID FROM costs_table ORDER BY Subsystem ASC';
querySelection($objDb,$sql);
# $objDb passes the database connection variable to the function
# $sql passes the query
?>
</select>
Continue for each query...
<select>
<option value="0">----</option>
<?php
$sql = 'SELECT DISTINCT Subsytem FROM Costs_table';
querySelection($objDb,$sql);
# $objDb passes the database connection variable to the function
# $sql passes the query
?>
</select>
...etc
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.