Dropdown help

New Coder · June 10, 2008

Hello all,

I hope somebody can help.

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. Reloading the page is not desirable because of the other textboxes the user would have filled in.

Have I made sense?

here is a snippet of my code for the dropdown;

<?php 

$sql="SELECT distinct item_code FROM item order by item_code"; 
$rs = mssql_query( $sql, $conn ) ;

echo '<select name="item_code">';  
echo '<option>Choose Item Code</option>';

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

echo '</select>';
?>

Many Thanks

saint959 · June 10, 2008

I think you would have to use an onChange event or something similiar on the <select>.

Then along with that ajax or javascript to change the value of the text field dynamically.

Thats how i would do it.

paulman888888 · June 10, 2008

this may sound silly but did you make the connection to your database first.

Secondi think this is right

I think you would have to use an onChange event or something similiar on the <select>.

Then along with that ajax or javascript to change the value of the text field dynamically.

Thats how i would do it.

Put the same code in to your javascrit code as well.

hope that helps

New Coder · June 10, 2008

Yes I've connected to the db and the dropdown is populating as it should, just didn’t think it was necessary to show code.

Hmmm JavaScript...I'm not the best at it.

Thanks for help

DarkWater · June 10, 2008

You need to use Ajax to do that. There's plenty of good guides out there, but we can help if you you're still lost.

New Coder · June 19, 2008

Hello All,

I have managed to find an guide on how to do this in AJAX. It almost works as I want but I would like to change it slightly and I'm having trouble with 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'm know I need to change this section of the code in the js file:

// 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) ;
}

But this is where I am stuck.

Does anybody have any ideas?

Many Thanks

Sign In

Dropdown help

Recommended Posts

New Coder

Link to comment

Share on other sites

saint959

Link to comment

Share on other sites

paulman888888

Link to comment

Share on other sites

New Coder

Link to comment

Share on other sites

DarkWater

Link to comment

Share on other sites

New Coder

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information