Databases
StackOverflow2013
Postsdbo
POLoad Drop Down Selection Dynamically via Ajax PHP
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLoad Drop Down Selection Dynamically via Ajax PHP
    primarykey
    data
    text
    <p>I have a form that is currently online and functioning - I spent most of yesterday searching for and implementing an AJAX solution for my FIRST set of drop-down boxes. But I want to add an additional set of three drop-down selection boxes to the form. The first two are no big deal. They have already been added to the form and are dynamically generated from two MYSQL tables at the initial loading of the form.</p> <p>However, the third drop-down is proving to be a bit more tricky.</p> <p>I have one set of drop-downs already on the form, which are dynamically generated in a multi-step process (ie. selection of first drop-down then loads list in second drop-down via AJAX, selection of second drop-down then loads list in the third drop-down dynamically via AJAX based on that input.</p> <p>This works well. However, I didn't write the code and can't fully work through the details of how it works. I understand the php pretty well, but the AJAX stuff has me baffled, and that's the part I need to understand for the new drop-downs.</p> <p>In this new group of drop-downs, the second list doesn't depend upon the first. Both the first and second lists load at page load. It is only the third drop-down which must be loaded via AJAX, but, in this case, it is dependent upon BOTH the first and second selection choices.</p> <p>So, in other words, the user makes the first selection and then makes the second (which is NOT dependent upon the first). But, upon making that second selection, the third drop-down is AJAX populated based on the selections made for BOTH the first and second list.</p> <p>I have no idea how to do this.</p> <p>I'm including my current code below. It's a little lengthy, but I don't know if it's possible to build off the already present AJAX and PHP functions in order to minimize the new code. In addition, I don't know if any new code might conflict with the old, so it's provided below.</p> <p>I know this is a relatively tall order (at least it seems like it to me), but I really need this form completed, and I've been working on this implementation all day and can't seem to understand the AJAX code well enough to complete it myself.</p> <p>Here's my current code (without alot of the extra formatting code):</p> <pre><code>&lt;?php $dbh = mysql_connect($hostname, $username, $password) or die("Unable to connect to MySQL"); $selected = mysql_select_db("evaluate_motoroilevaluator",$dbh); if( isset($_GET['ajax']) ) { //In this if statement switch($_GET['ID']) { case "LBox2": $query = sprintf("SELECT * FROM vehicle_data_makes WHERE List1Ref=%d",$_GET['ajax']); break; case "LBox3": $query = sprintf("SELECT * FROM vehicle_data_all WHERE List2Ref=%d",$_GET['ajax']); break; } $result = mysql_query($query) or die(mysql_error()); while ($row = mysql_fetch_assoc($result)) { echo "&lt;option value='{$row['ID']}'&gt;{$row['Name']}&lt;/option&gt;\n"; } mysql_close($dbh); exit; //we're finished so exit.. } if (!$result = mysql_query("SELECT * FROM vehicle_data_years")) { echo "Database is down"; } //for use with my FIRST list box $List1 = ""; while ($row = mysql_fetch_assoc($result)) { $List1 .= "&lt;option value='{$row['ID']}'&gt;{$row['Name']}&lt;/option&gt;\n"; } ?&gt; &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;script language="javascript"&gt; function ajaxFunction(ID, Param) { //link to the PHP file your getting the data from //var loaderphp = "register.php"; //i have link to this file var loaderphp = "&lt;?php echo $_SERVER['PHP_SELF'] ?&gt;"; //we don't need to change anymore of this script var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }catch(e){ // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ alert("Your browser does not support AJAX!"); return false; } } } xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { //the line below reset the third list box incase list 1 is changed var sSelect = document.getElementById(ID); for(options in sSelect.options) sSelect.remove(options); var opt = document.createElement("option"); sSelect.options.add(opt); var data = xmlHttp.responseText; results = data.split('\n'); for(r in results){ var d = results[r]; match = d.match(/&lt;option value='(.*?)'&gt;([^&lt;]*)&lt;\/option&gt;/); if (match != null) { var opt = document.createElement("option"); opt.value= match[1]; opt.text = match[2]; sSelect.options.add(opt); } } } } xmlHttp.open("GET", loaderphp+"?ID="+ID+"&amp;ajax="+Param,true); xmlHttp.send(null); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form enctype="multipart/form-data" action ="&lt;?php echo $_SERVER['PHP_SELF'] ?&gt;" method="post" name="myForm" accept-charset="utf-8"&gt; &lt;ul class="form-section"&gt; &lt;li id="cid_1" class="form-input-wide"&gt; &lt;div class="form-header-group"&gt; &lt;h1 id="header_1" class="form-header"&gt; Enter Vehicle Info &lt;/h1&gt; &lt;div id="subHeader_1" class="form-subHeader"&gt; Tell us about your vehicle &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class="form-line" id="id_3"&gt; &lt;label class="form-label-left" id="label_3" for="input_3"&gt; Vehicle Model Year&lt;span class="form-required"&gt;*&lt;/span&gt; &lt;/label&gt; &lt;div id="cid_3" class="form-input"&gt; &lt;select class="form-dropdown" style="width:150px" name="list1" id="LBox1" onchange="ajaxFunction('LBox2', this.value);"&gt; &lt;option value=''&gt;&lt;/option&gt; &lt;?php echo $List1; ?&gt; &lt;/select&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class="form-line" id="id_4"&gt; &lt;label class="form-label-left" id="label_4" for="input_4"&gt; Vehicle Make&lt;span class="form-required"&gt;*&lt;/span&gt; &lt;/label&gt; &lt;div id="cid_4" class="form-input"&gt; &lt;select class="form-dropdown" style="width:150px" name="list2" id="LBox2" onchange="ajaxFunction('LBox3', this.value);"&gt; &lt;option value=''&gt; &lt;/option&gt; &lt;!-- OK the ID of this list box is LBox2 as refered to above --&gt; &lt;/select&gt; (allow time to load following above selection) &lt;/div&gt; &lt;/li&gt; &lt;li class="form-line" id="id_5"&gt; &lt;label class="form-label-left" id="label_5" for="input_5"&gt; Vehicle Model&lt;span class="form-required"&gt;*&lt;/span&gt; &lt;/label&gt; &lt;div id="cid_5" class="form-input"&gt; &lt;select class="form-dropdown" style="width:150px" name="list3" id="LBox3"&gt; &lt;option value=''&gt; &lt;/option&gt; &lt;!-- OK the ID of this list box is LBox3 Same as above --&gt; &lt;/select&gt; (allow time to load following above selection) &lt;/div&gt; &lt;/li&gt; &lt;!-- ----------------------NEW STUFF ----------------------------- --&gt; &lt;?php //for use with my FIRST motor oil drop-down: viscosity $Viscosity_List = ""; $vis_result = mysql_query("SELECT * FROM viscosity"); while ($vis_row = mysql_fetch_assoc($vis_result)) { $Viscosity_List .= "&lt;option value='{$vis_row['id']}'&gt;{$vis_row['name']}&lt;/option&gt;\n"; } ?&gt; &lt;?php //for use with my SECOND motor oil drop-down: Brand $Brand_List = ""; $brand_result = mysql_query("SELECT * FROM oil_brand ORDER BY brandname"); // $brand_result = asort($brand_result); while ($brand_row = mysql_fetch_assoc($brand_result)) { $Brand_List .= "&lt;option value='{$brand_row['brandid']}'&gt;{$brand_row['brandname']}&lt;/option&gt;\n"; } ?&gt; &lt;li class="form-line" id="id_12"&gt; &lt;label class="form-label-left" id="label_12" for="input_12"&gt; Motor Oil Viscosity&lt;span class="form-required"&gt;*&lt;/span&gt; &lt;/label&gt; &lt;div id="cid_12" class="form-input"&gt; &lt;select class="form-dropdown validate[required]" style="width:150px" id="input_12" name="oil_viscosity"&gt; &lt;option&gt; &lt;/option&gt; &lt;?php echo $Viscosity_List; ?&gt; &lt;/select&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class="form-line" id="id_13"&gt; &lt;label class="form-label-left" id="label_13" for="input_13"&gt; Motor Oil Brand&lt;span class="form-required"&gt;*&lt;/span&gt; &lt;/label&gt; &lt;div id="cid_13" class="form-input"&gt; &lt;select class="form-dropdown validate[required]" style="width:150px" id="input_13" name="oil_brand"&gt; &lt;option&gt; &lt;/option&gt; &lt;?php echo $Brand_List; ?&gt; &lt;/select&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class="form-line" id="id_14"&gt; &lt;label class="form-label-left" id="label_14" for="input_14"&gt; Motor Oil Product&lt;span class="form-required"&gt;*&lt;/span&gt; &lt;/label&gt; &lt;div id="cid_14" class="form-input"&gt; &lt;select class="form-dropdown validate[required]" style="width:150px" id="input_14" name="oil_product"&gt; &lt;option&gt; &lt;/option&gt; &lt;option value="Option 1"&gt; Option 1 &lt;/option&gt; &lt;option value="Option 2"&gt; Option 2 &lt;/option&gt; &lt;option value="Option 3"&gt; Option 3 &lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/li&gt; &lt;!-- -------------------------------- END NEw STUFF ------------------------------- --&gt; &lt;li class="form-line" id="id_2"&gt; &lt;button id="input_2" type="submit" class="form-submit-button"&gt; Submit Form &lt;/button&gt; &lt;/li&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Many thanks in advance for any assistance.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMichael
    1. USMichael
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POLoad Drop Down Selection Dynamically via Ajax PHP
      1. USuzair
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload