New Coder Posted June 10, 2008 Share Posted 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 Quote Link to comment Share on other sites More sharing options...
saint959 Posted June 10, 2008 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
paulman888888 Posted June 10, 2008 Share Posted 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 Quote Link to comment Share on other sites More sharing options...
New Coder Posted June 10, 2008 Author Share Posted 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 Quote Link to comment Share on other sites More sharing options...
DarkWater Posted June 10, 2008 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
New Coder Posted June 19, 2008 Author Share Posted 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.