Jump to content

Cascading dropdown

New Coder

By New Coder
in Javascript Help

Recommended Posts

New Coder Member

New Coder

Posted
Posted

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

Link to comment
https://forums.phpfreaks.com/topic/110937-cascading-dropdown/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.