Menu
I have a page that has a category dropdown and a position dropdown. When the page displays, I don’t want the position dropdown to have anything in it. When a user selects something from the category dropdown, it calls my Oracle database, gets all the positions that belong to that category, and returns them. I wan my position dropdown to then be populated with these results, all without pressing a submit button. Can anyone help me with this? I searched the forum, but didn’t really find anything to help me.
Thanks!!
[code=php]<?php
# DB connect details
$host = '*****'; # fill in
$user = '*****'; # fill in
$pass = '*****'; # fill in
$self = 'http://'.$_SERVER['HTTP_HOST'].htmlentities($_SERVER['PHP_SELF']);
# This populates the child menu
if(isset($_POST['method'])){
$items = array();
$mysql = mysql_connect($host, $user, $pass) or die (mysql_error());
mysql_select_db('test') or die (mysql_error());
$query = "SELECT item FROM clothes WHERE sex = '".mysql_ready($_POST['value'])."' ORDER BY item";
$query_result = mysql_query($query) or die (mysql_error());
if(mysql_num_rows($query_result))
{
while($row = mysql_fetch_assoc($query_result))
{
$items[] = $row['item'];
}
}
xmlResponse($items);
}
# This outputs the main HTML form
echo html_template('Clothes form', form($self), CSS(), javascript($self));
# FUNCTION SECTION #
function mysql_ready($input)
{
if(get_magic_quotes_gpc())
{
$input = stripslashes($input);
}
return mysql_real_escape_string($input);
}
function CSS()
{
return <<<CSS
select{
width:12em;
}
#ChildMenu{
visibility:hidden;
}
CSS;
}
function javascript($action)
{
return <<<JAVASCRIPT
function loadXMLDoc(url, query)
{
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open('POST', url, true);
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
req.send(query);
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open('POST', url, true);
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
req.send(query);
}
}
}
function processReqChange()
{
if (req.readyState == 4) {
if (req.status == 200) {
response = req.responseXML.documentElement;
method = response.getElementsByTagName('method')[0].firstChild.data;
result = response.getElementsByTagName('result')[0];
eval(method + '('', result)');
}
}
}
function DropDown(input, response)
{
if(response){
// Response mode
numOptions = response.getElementsByTagName('option').length;
if(!numOptions) return false;
oldNodes = document.getElementById('ChildMenu').childNodes.length;
while(oldNodes>0)
{
document.getElementById('ChildMenu').removeChild(document.getElementById('ChildMenu').childNodes[oldNodes-1]);
oldNodes--;
}
for(i=0;i<numOptions;i++)
{
Text = response.getElementsByTagName('option')[i].firstChild.data;
newOption = document.createElement("option");
newOption.value = Text;
optionText = document.createTextNode(Text);
newOption.appendChild(optionText);
document.getElementById('ChildMenu').appendChild(newOption);
}
document.getElementById('ChildMenu').style.visibility = 'visible';
}else{
// Input mode
selection = input.options[input.selectedIndex].value;
document.getElementById('ChildMenu').style.visibility = 'hidden';
if(selection == '') return false;
url = '{$action}';
query = 'method=DropDown&value=' + selection;
loadXMLDoc(url, query);
}
}
JAVASCRIPT;
}
function form($action)
{
return <<<HTML
<form action="$action" method="POST">
<p>
<select id="ParentMenu" name="ParentMenu" size="1" onchange="DropDown(this,null);">
<option value="" selected="selected">Choose one...</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</p>
<p>
<select id="ChildMenu" name="ChildMenu" size="1">
<option></option>
</select>
</p>
</form>
HTML;
}
function html_template($title, $content, $css = NULL, $javascript = NULL)
{
return <<<HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">$javascript</script>
<style type="text/css">$css</style>
<title>$title</title>
</head>
<body>
$content
</body>
</html>
HTML;
}
function xmlResponse($input)
{
if(!count($input)) exit;
$output = NULL;
foreach($input as $v)
{
$output .= ' <option>'.$v.'</option>'."n";
}
#ini_set('display_errors', '0');
header('Content-Type: text/xml');
$output = '<?xml version="1.0" encoding="iso-8859-1"?>'."n".
'<response>'."n".
' <method>'.$_POST['method'].'</method>'."n".
' <result>'."n".$output.' </result>'."n".
'</response>';
echo $output;
exit;
}
?>[/code]<i>
</i>function processReqChange()
{
if (req.readyState == 4) {
alert("readyState = 4");
if (req.status == 200) {
alert("status = 200");
response = req.responseXML.documentElement;
alert("response = "+response);
method = response.getElementsByTagName('method')[0].firstChild.data;
alert("method = "+method);
result = response.getElementsByTagName('result')[0];
alert("result");
eval(method + '('', result)');
}
}
}
Ok, how would youdo this without AJAX?[/QUOTE]2 methods, the first was suggested in post #2 above (load all options into javascript arrays on initial load). This depends how big the database is. And the second option is a multi step form process with conventional page reloads.
I just posted a reply to the AJAX implentation about getting a null back. The table that I will be calling for the second dropdown list is pretty big.[/QUOTE]It's not the size of the table that matters, it's the size of the query result that is important.
Also, if I was to do multiple page reloads, how can I have a form inside a form? The firs form for the entire page of data, and a form for just these 2 dropdown boxes?[/QUOTE]You can't! It wouldn't be valid html and would react unpredictibly.
this is on an intranet, so it's only internal.[/QUOTE]I'd go with the ajax solution then. There should be no noticable lag at all. My code above should be easy to modify for this.
the response variable is coming back as null.[/QUOTE]That is because your sql query is not raising any results.
0.1.9 — BETA 5.19