Cascading dropdown

New Coder · June 19, 2008

Hello all,

I did originally start this thread in the php help section and was instructed to look into AJAX. I have now got a script and modified to suit my needs as far as I can, but now I'm stuck.

I have a web page with a number of text boxes and 1 dropdown list box which is populated from a DB. This list box displays alphanumeric item codes. I want the user to select an item code and then the description of that item appear in a text field next to it.

The code uses 3 scripts/pages:

1. The index page where the dropdown exists:

<html>

<head>
	<title>Ajax Drop-down List Example</title>
	<script src="js/AjaxCode.js"></script>
</head>


<h2>Ajax Cascading Drop-down Example</h2>
<br>
<?php
  	$conn = @mssql_connect(  "server", "user", "password" )
      			or die( "Err:conn");
#select db
$rs = @mssql_select_db( "database", $conn)
		or die( "ERR:Db");

?>	
<table border="0" align= "center" cellpadding="2" width="100%">
<tr>
		<th class="table" colspan="4">Items</th>
	</tr>
	<tr>
		<th class="tblleft">Item Code:</th>
		<td class="table"><?php 

$sql="SELECT item_code FROM item_codes"; 
$rs = mssql_query( $sql, $conn ) ;

echo '<select name="itemcode" id="itemcode" onChange="return itemcodeOnChange()">';  
echo '<option>Choose Item Code</option>';

while($row = mssql_fetch_array($rs))
{  
  echo '<option value="'.$row[0].'"'.'>'.$row[0].'</option>';
   
}  

echo '</select>';
?>
<br>
<br>

<!-- drop down #2, list contents depend on value selected in drop-down #1 -->
    <!-- code in the file js/AjaxCode.js will populate this drop-down list                  -->
<select name="codedesc" id="codedesc" >
</select>
</td></tr></table>
</html>

2. The JavaScript (AjaxCode.js):

// declare a global  XMLHTTP Request object
var XmlHttpObj;

// create an instance of XMLHTTPRequest Object, varies with browser type, try for IE first then Mozilla
function CreateXmlHttpObj()
{
// try creating for IE (note: we don't know the user's browser type here, just attempting IE first.)
try
{
	XmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
	try
	{
		XmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
	} 
	catch(oc)
	{
		XmlHttpObj = null;
	}
}
// if unable to create using IE specific code then try creating for Mozilla (FireFox) 
if(!XmlHttpObj && typeof XMLHttpRequest != "undefined") 
{
	XmlHttpObj = new XMLHttpRequest();
}
}

// called from onChange or onClick event of the item code dropdown list
function itemcodeOnChange() 
{
    var itemcode = document.getElementById("itemcode");
    
    // get selected item code from dropdown list
    var selecteditemcode = itemcode.options[itemcode.selectedIndex].value;
    
    // url of page that will send xml data back to client browser
    var requestUrl;

    requestUrl = "xml_data_provider.php" + "?filter=" + encodeURIComponent(selecteditemcode);
    
CreateXmlHttpObj();

// verify XmlHttpObj variable was successfully initialized
if(XmlHttpObj)
{
        // assign the StateChangeHandler function ( defined below in this file)
        // to be called when the state of the XmlHttpObj changes
        // receiving data back from the server is one such change
	XmlHttpObj.onreadystatechange = StateChangeHandler;

	// define the iteraction with the server -- true for as asynchronous.
	XmlHttpObj.open("GET", requestUrl,  true);

	// send request to server, null arg  when using "GET"
	XmlHttpObj.send(null);		
}
}


// this function called when state of  XmlHttpObj changes
// we're interested in the state that indicates data has been
// received from the server
function StateChangeHandler()
{
// state ==4 indicates receiving response data from server is completed
if(XmlHttpObj.readyState == 4)
{
	// To make sure valid response is received from the server, 200 means response received is OK
	if(XmlHttpObj.status == 200)
	{			
		Populatedesc(XmlHttpObj.responseXML.documentElement);
	}
	else
	{
		alert("problem retrieving data from the server, status code: "  + XmlHttpObj.status);
	}
}
}

// populate the contents of the description dropdown list
function Populatedesc(descNode)
{
    var codedesc = document.getElementById("codedesc");
// clear the description list 
for (var count = codedesc.options.length-1; count >-1; count--)
{
	codedesc.options[count] = null;
}

var descNodes = descNode.getElementsByTagName('desc');
var idValue;
var textValue; 
var optionItem;
// populate the dropdown list with data from the xml doc
for (var count = 0; count < descNodes.length; count++)
{
   		textValue = GetInnerText(descNodes[count]);
	idValue = descNodes[count].getAttribute("id");
	optionItem = new Option( textValue, idValue,  false, false);
	codedesc.options[codedesc.length] = optionItem;
}
}

// returns the node text value 
function GetInnerText (node)
{
return (node.textContent || node.innerText || node.text) ;
}

and the data handler (xml_data_provider.php):

<?php


    Header("Content-type: text/xml"); 
    // get query string params
$filter = rtrim($_GET['filter']);

    // build xml content for client JavaScript

$xml = '';

$conn = @mssql_connect(  "server", "user", "password" )
      			or die( "Err:conn");
#select db
$rs = @mssql_select_db( "database", $conn)
		or die( "ERR:Db");

$sql ="SELECT full_desc FROM item_codes where item_code =\"$filter\" "; 
$rs = mssql_query( $sql, $conn ) ;
$row = mssql_fetch_array($rs);

        $xml = $xml . '<title>';
        $xml = $xml . '<desc>'.$row['full_desc'].'</desc>';
        $xml = $xml . '</title>';

    // send xml to client
echo( $xml );
?>

It does work and the second dropdown does populate with the correct description. However there will only ever be 1 result returned so a second dropdown is pointless. What would be more useful is if I can get it to fill in a text box instead. I would therefore change the <select name="codedesc" id="codedesc" ></select> in the index page to be just a text box.

I know I need to change the following section of the code in the js file, presumably removing or changing the option section, but this is where I am lost. How do I get it to pass the information so that it will just populate a text box?:

// populate the contents of the description dropdown list
function Populatedesc(descNode)
{
    var codedesc = document.getElementById("codedesc");
// clear the description list 
for (var count = codedesc.options.length-1; count >-1; count--)
{
	codedesc.options[count] = null;
}

var descNodes = descNode.getElementsByTagName('desc');
var idValue;
var textValue; 
var optionItem;
// populate the dropdown list with data from the xml doc
for (var count = 0; count < descNodes.length; count++)
{
   		textValue = GetInnerText(descNodes[count]);
	idValue = descNodes[count].getAttribute("id");
	optionItem = new Option( textValue, idValue,  false, false);
	codedesc.options[codedesc.length] = optionItem;
}
}

// returns the node text value 
function GetInnerText (node)
{
return (node.textContent || node.innerText || node.text) ;
}

Does anybody have any ideas?

Sorry for the potential double posting but my question has now changed topic and I thought it was now best suited to this section.

Many Thanks

Sign In

Cascading dropdown

Recommended Posts

New Coder

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information