Jump to content

Dropdown help


New Coder

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.