Hey members of digial point, I need a little help here, I need two drop downs, which have dynamic results. I need the first one to select from MySQL tables (the categories) and need the second one to change based on the users input from the first one. so lets say the user selects cars for the first one, then on the second one would have ever car in that category. Remember, these will both be changing very frequently, thanks in advanced, nothing I've tried has worked.
Yes, that's definitely doable with Ajax. Have a look at my Ajax tutorial here: http://www.php-etc.com/tutorials/Ajax/ This demo, using the sample code in the tutorial above, is very similar to what you're after: http://www.php-etc.com/tutorials/Ajax/demo.php
so test.php has the MySQL stuff right? is their an easy way of doing that all in the script it's self? I would prefer to leave it as one page. Also, both drop downs need to be dynamic and stream from a MySQL database. I know little to no ajax, so this is all kinda confusing for me
yes, test.php does the mysql queries and outputs the result. this output is captured by the 'xhr' object and can be safely processed when the 'status' is 200 (code for successful request). in my demo page, if you look at the javascript source, the output of the script is assumed to be in XML format, and the select drop down is updated using DOM. if you are not familiar with DOM and/or XML, you could also make your 'test.php' file (or whatever file name you choose) to output in HTML format, then instead of using DOM, simply use the innerHTML property to update the select drop down. just remember that, if the output is in XML format, you get it using: xhr.responseXml and if it's in HTML or other text format, use: xhr.responseText. this 'test.php' script can be named anything, and you could also use the same script to deal with the getting of the list of cars. it doesn't really matter in terms of how Ajax works. the XmlHttpRequest object simply requests for a file/script with the name and parameters that you specify, then gives you the output. you then deal with this output with "normal" javascript.
don't be discouraged if it all looks confusing and complicated at first. that's always the case with learning new things. just start with trying a small example, even simply by copying and pasting the sample code. then try making small changes, e.g.: alerting a different text, displaying the text somewhere in the HTML page. after you've made enough trial and errors, you'll already get enough basic understanding of how it all works and extending it will be as easy as pie then
You cannot put all the code in one file. See, my example, "Dynamic Select List With PHP/MySQL" here: http://ajaxforums.net/index.php?topic=858.0
I still can't get it, I'm close though. Here's my code for test.php: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Any Title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> var AdminResponse = ""; function parseResponse(){ var nText = AdminResponse.getElementsByTagName('optionText'); var nVal = AdminResponse.getElementsByTagName('optionVal'); document.forms[0]['group'].options.length = 1; for (i=0; i<nText.length; i++) { var nOption = document.createElement('option'); var isText = document.createTextNode(nText[i].firstChild.data); nOption.setAttribute('value',nVal[i].firstChild.data); nOption.appendChild(isText); document.forms[0]['group'].appendChild(nOption); } } function update(nVal){ var AdminRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest(); AdminRequest.onreadystatechange = function() { if (AdminRequest.readyState == 4) { if (AdminRequest.status == 200) { AdminResponse = AdminRequest.responseXML; parseResponse(); } else { alert('Error Update.php File '+ AdminRequest.statusText); } } } var infoStr = "?choice="+nVal; AdminRequest.open("GET", "Update.php"+infoStr, true); AdminRequest.send(null); } </script> <style type="text/css"> body {background-color:#eae3c6;margin-top:60px} form {width:430px;margin:auto} fieldset {width:410px;background-color:#f0fff0;border:1px solid #87ceeb} legend {font-family:times;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px} select {font-family;tahoma;font-size:10pt;width:160px;margin-left:35px;margin-bottom:10px} </style> </head> <body> <form action=""> <fieldset> <legend>Form</legend> <?php mysql_connect("localhost", "username", "pass") or die(mysql_error()); mysql_select_db("name") or die(mysql_error()); $sql = "SHOW TABLES LIKE 'CMS_%'"; $query = mysql_query($sql); $rows = array(); if(mysql_num_rows($query) > 0){ while($row = mysql_fetch_array($query)) { array_push($rows, substr($row[0], 4)); } } if (count($rows) == 0) { echo 'No tables in the database found beginning with <strong>cms_</strong>...<br />'; } else { echo '<select name="foods" onChange="update(this.value)">'; if(is_array($rows)){ foreach($rows as $value){ echo "<option value='$value'>" . $value . "</option>"; } echo '</select>'; } else { echo "$rows is not an array"; } } ?> <select name="group" onChange="alert(this.value)"> <option value=""> Make a selection </option> </select> </fieldset> </form> </body> </html> Code (markup): And for Update.php: <?php $choice = $_GET['choice']; $xml = "<?xml version='1.0' ?><options>"pass") or die(mysql_error()); mysql_select_db("dbname") or die(mysql_error()); $query = "SELECT * FROM CMS_$choice WHERE name"; $result = @mysql_query($query); $num = @mysql_num_rows($result); if ($result && $num > 0) { while ($row = mysql_fetch_array($result,MYSQL_ASSOC)) { $xml .= "<optionText>" . $row['optText'] . "</optionText><optionVal>" . $row['optVal'] . "</optionVal>"; } } $xml .= "</options>"; @mysql_free_result($result); @mysql_close(); header("Content-Type: text/xml"); echo $xml; ?> PHP:
I don't have time to look at your code line by line. I offered a working example, that's the best I can do.
First of all, there's PHP syntax error in your Update.php. Check how you use quotes. You may want to open this script in a browser window to make sure that there's no error and the XML is well-formed. In test.php, from a quick look everything is good. Just one thing, remove this line in your parseResponse() function: document.forms[0]['group'].options.length = 1; Code (markup):
Did you fix this? $xml = "<?xml version='1.0' ?><options>"pass") or die(mysql_error()); PHP: I think it was supposed to be this: $xml = "<?xml version='1.0' ?><options>"; mysql_connect('host', 'user', 'pass') or die(mysql_error()); PHP: Replace host, user and pass with your MySQL details.
Yes, I've done that, I just replaced those for this thread. EDIT: I think it has to do with Update.php - which currently displays </options> and <options></options> in the html code EDIT: I've got it.. Thanks everyone!