Jump to content

Chained Select boxs php/ajax/mysql

justinjkiss

By justinjkiss
in Javascript Help

 Share

Recommended Posts

justinjkiss Newbie

justinjkiss

Posted
Posted

To start - i know there are script out there for this but i cant get any to work for whatever reason.

 

Im attempting to use Roshan's Ajax dropdown code with php (http://hybridlifts.com/position/pages/ss/parts1.php) and i can get it to pass the value of the 1st dropdown to the php file and it then populates the 2nd dropdown. The 2nd dropdown isnt stripping duplicates out though :( so its over populated. Also when i make my selection on the 2nd one i get an error on the dev console in chrome which says "parts2.php:1 Uncaught ReferenceError: HB is not defined." Under the network and if i inspect the element the value being passed is actually HB-830 but chrome is seeing only HB. The 3rd dropdown wont populate with the error.

 

The contents of dropdown1 (models) and dropdown2 (location) are the fixed and wont change. Depending on the model the functional circuit might have content or might not... I only want the functional ciruits that have data in the database to be options for selection. An example of what im talking about is my non AJAX version here - http://hybridlifts.com/position/pages/ss/parts.php - select hb-830 -> decals -> special kits. This spits out saying no parts contact service. Why bother even giving the option to select something that doesnt exist was my thought.

 

parts2.php

<!DOCTYPE HTML>

<html><!-- InstanceBegin template="/Templates/indextemplate.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <!-- InstanceBeginEditable name="doctitle" -->
        <title>Parts</title>
        <!-- InstanceEndEditable -->
        <link href="../../css/main.css" rel="stylesheet" type="text/css">
        <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
        <!-- InstanceBeginEditable name="head" -->
        

<script language="javascript" type="text/javascript">
// Roshan's Ajax dropdown code with php
// This notice must stay intact for legal use
// Copyright reserved to Roshan Bhattarai - nepaliboy007@yahoo.com
// If you have any problem contact me at http://roshanbh.com.np
function getXMLHTTP() { //fuction to return the xml http object
	var xmlhttp=false;	
	try{
		xmlhttp=new XMLHttpRequest();
	}
	catch(e)	{		
		try{			
			xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(e){
			try{
			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch(e1){
				xmlhttp=false;
			}
		}
	}

	return xmlhttp;
    }

function getloc(modelId) {		

	var strURL="getlocation.php?model="+modelId;
	var req = getXMLHTTP();

	if (req) {

		req.onreadystatechange = function() {
			if (req.readyState == 4) {
				// only if "OK"
				if (req.status == 200) {						
					document.getElementById('statediv').innerHTML=req.responseText;						
				} else {
					alert("There was a problem while using XMLHTTP:\n" + req.statusText);
				}
			}				
		}			
		req.open("GET", strURL, true);
		req.send(null);
	}		
}
function getfunit(modelId,locationId) {		
	var strURL="getfunit.php?model="+modelId+"&location="+locationId;
	var req = getXMLHTTP();

	if (req) {

		req.onreadystatechange = function() {
			if (req.readyState == 4) {
				// only if "OK"
				if (req.status == 200) {						
					document.getElementById('citydiv').innerHTML=req.responseText;						
				} else {
					alert("There was a problem while using XMLHTTP:\n" + req.statusText);
				}
			}				
		}			
		req.open("GET", strURL, true);
		req.send(null);
	}

}
</script>


<!-- InstanceEndEditable -->
    </head>

    <body>
    
    	<div id="container">
        
        	<div id="container_inner">
        
                <div id="header">
                    <img src="../../images/hybridlogo.png" alt="Hy-Brid Lifts" id="logo" />
                </div>
                
                <div id="nav">
                    <ul id="menu"> 
                        <li> 
                            <a href="../../index.html">Home</a> 
                        </li> 
                        <li> 
                        <a href="../about.html">About</a> 
                            <ul> 
                                <li> 
                                <a href="../about/mvc.html">Mission, Vision, Core Values</a> 
                                </li> 
                                <li> 
                                <a href="../about/history.html">History</a> 
                                </li> 
                                <li> 
                                <a href="../about/news/">News</a> 
                                </li> 
                            </ul> 
                        </li> 
                        <li> 
                            <a href="../products.html">Products</a> 
                                <ul> 
                                    <li><a href="#">ANSI/CSA</a>
                                        <ul>
                                            <li> 
                                            <a href="../products/hbp830.html">HB-P830</a> 
                                            </li> 
                                            <li> 
                                            <a href="../products/hb830.html">HB-830</a> 
                                            </li> 
                                            <li> 
                                            <a href="../products/hb1030.html">HB-1030</a> 
                                            </li> 
                                            <li> 
                                            <a href="../products/hb1430.html">HB-1430</a> 
                                            </li> 
                                        </ul>
                                    </li> 
                                    <li><a href="#">CE</a> 
                                        <ul>
                                            <li> 
                                            <a href="../products/hbp830ce.html">HB-P830CE</a> 
                                            </li> 
                                            <li> 
                                            <a href="../products/hb830ce.html">HB-830CE</a> 
                                            </li> 
                                            <li> 
                                            <a href="../products/hb1030ce.html">HB-1030CE</a> 
                                            </li> 
                                            <li> 
                                            <a href="../products/hb1430ce.html">HB-1430CE</a> 
                                            </li> 
                                        </ul>
                                    </li>
                                    </ul> 
                        </li>			
                        <li> 
                        <a href="../servicesupport.html">Service and Support</a> 
                            <ul> 
                                <li> 
                                <a href="training.html">Training</a> 
                                </li> 
                                <li> 
                                <a href="parts.php">Parts</a> 
                                </li> 
                                <li> 
                                <a href="servicerepair.html">Service and Repair</a> 
                                </li> 
                                <li> 
                                <a href="warranty.html">Warranty</a> 
                                </li>						
                            </ul> 
                        </li> 
                        <li><a href="#">Dealer Locator</a> 
                            <ul> 
                                <li> 
                                <a href="../locator/locateaf.php">Africa</a> 
                                </li> 
                                <li> 
                                <a href="../locator/locateas.php">Asia</a> 
                                </li> 
                                <li> 
                                <a href="../locator/locateauoc.php">Australia/Oceania</a> 
                                </li> 
                                <li> 
                                <a href="../locator/locateeu.php">Europe</a> 
                                </li> 
                                <li> 
                                <a href="../locator/locatena.php">North America</a> 
                                </li> 
                                <li> 
                                <a href="../locator/locatesa.php">South America</a> 
                                </li> 
                            </ul> 
                        </li>		
                        <li> 
                        <a href="../dealercenter.php">Dealer Center</a> 
                            <ul> 
                                <li> 
                                <a href="../dealercenter.php">Dealer Home</a> 
                                </li> 
                                <li> 
                                <a href="../dealer/dparts.php">Parts</a> 
                                </li> 
                                <li> 
                                <a href="../dealer/dwarranty.php">Warranty</a> 
                                </li> 
                                <li> 
                                <a href="../dealer/dsales.php">Sales</a> 
                                </li> 
                                <li> 
                                <a href="../dealer/dmm.php">Marketing Materials</a> 
                                </li> 
                            </ul> 
                        </li> 
                        <li>							
                        <a href="../contact.html">Contact Us</a> 
                        </li>				
                    </ul>
                <!-- InstanceBeginEditable name="EditRegion6" -->
                 <div id="breadcrumb">
                    	<ul id="crumbs">
                            <li><a href="../../index.html">Home</a></li>
                            <li><a href="../servicesupport.html">Service and Support</a></li>
                            <li>Parts</li>
					</ul>
                </div>                  
			<!-- InstanceEndEditable -->
                </div>
                
                <div id="flashbar">
			<!-- InstanceBeginEditable name="EditRegion5" -->
              	<!-- InstanceEndEditable -->
                </div>
                
                <div id="content">
                    
                    <div id="boxcontainer">
				<!-- InstanceBeginEditable name="content" -->
                    <!-- InstanceEndEditable -->
                    </div>
                
                </div>
                
                <div id="news">
				<!-- InstanceBeginEditable name="news" -->
                    	<div id="box">
						<div class="boxheader"><p class="boxhead">Parts Selector</p></div>
                                <div id="tabscontent">
                                    <div id="formsmall">
                                    <form action="<?=$_SERVER['PHP_SELF']?>" method="post">
                                    <label></label>
                                        <select name="model" onChange="getloc(this.value)">
                                            <option value="default" selected="selected">Please Select Machine</option>
                                            <option value="HB-P830">HB-P830</option>
                                            <option value="HB-830">HB-830</option>
                                            <option value="HB1030S1">HB-1030 Series 1</option>
                                            <option value="HB1030S2">HB-1030 Series 2</option>                                            
                                            <option value="HB1430S1">HB-1430 Series 1</option>
                                            <option value="HB1430S2">HB-1430 Series 2</option>
                                            <option value=""></option>
                                            <option value="HB-P830CE">HB-P830CE</option>
                                            <option value="HB-830CE">HB-830CE</option>
                                            <option value="HB1030CES1">HB-1030CE Series 1</option>
                                            <option value="HB1030CES2">HB-1030CE Series 2</option>                                            
                                            <option value="HB1430CES1">HB-1430CE Series 1</option>
                                            <option value="HB1430CES2">HB-1430CE Series 2</option>
                                        </select>
                                        <label></label>
                                        <div id="statediv"><select name="state" >
                                        <option>Select Country First</option>
                                            </select></div>                                      
                                        <label></label>   
                                        <div id="citydiv"><select name="city">
                                        <option>Select State First</option>
                                            </select></div>
                                        <label></label>                                                                                 
                                        <input type="submit" name="submit" value="Submit" id="submit">
                                    </form>
                                    </div>

								<?
                                    if(isset($_POST['submit']))
                                    {
                                    // open connection to MySQL server
                                    $connection = mysql_connect('localhost', $username , $password) or die ('Unable to connect!');
                
                                    // select database for use
                                    mysql_select_db('custkis6_parts') or die ('Unable to select database!');
                                    
                                    $model=$_POST['model'];
								$location=$_POST['location'];
								$funit=$_POST['functionalunit'];
                                    $query = "SELECT * FROM hybrid WHERE model='$model' AND plocation='$location' AND fcircuit='$funit'";
                                    $result = mysql_query($query) or die ('Error in query: $query. ' . mysql_error());
                                    
                                     echo '<table id="producttable"><thead><tr><th><p>Model: ' . $model . '</p></th><th><p>Part Location: '. $location . '</p></th><th><p>Functional Unit: ' . $funit . '</p></th></tr></thead><tbody>';
                                        // check if records were returned
                                        if (mysql_num_rows($result) > 0)
                                        {
                                            // print HTML table
                                            echo '<table id="producttable" class="sortable"><thead><tr><th><h3>Part</h3></th><th><h3>Part Number</h3></th><th class="nosort"><h3>Part Image</h3></th><th class="nosort"><h3>Part Notes</h3></th></tr></thead><tbody>';
                                            // iterate over record set
                                            // print each field
                                            while($row = mysql_fetch_row($result))
                                            {
                                                echo '<tr>';
                                                echo '<td>' . $row[3] . '</td>';
                                                echo '<td>' . $row[2] . '</td>';
                                                echo '<td>a href="http://' . $row[5] . '"target="_blank">img src="http://' . $row[4] . '" /></a></td>';
                                                echo '<td>' . $row[8] . '</td>';									
                                                echo '</tr>';
                                            }
                                        }
                                        else
                                        {
                                            // print error message
                                            echo '<table id="producttable"><tr>';
                                            echo '<td class="textcenter">No Parts found.<br />Please contact the Service Department at +1-262-644-1300</td>';
                                            echo '</tr>';
                                        }
                                                            
                                    // once processing is complete
                                    // free result set
                                    mysql_free_result($result);
                                    // close connection to MySQL server
                                    mysql_close($connection);	
                                    }
                                    else
                                    {
                                    
                                    }
                                    ?>
                                    </tbody>
                                    </table>
                                    <script type="text/javascript" src="../../files/tinytable/packed.js"></script>
                                    <script type="text/javascript">
                                        var sorter = new TINY.table.sorter("sorter");
                                        sorter.head = "head";
                                        sorter.asc = "asc";
                                        sorter.desc = "desc";
                                        sorter.even = "evenrow";
                                        sorter.odd = "oddrow";
                                        sorter.evensel = "evenselected";
                                        sorter.oddsel = "oddselected";
                                        sorter.paginate = false;
                                        sorter.currentid = "currentpage";
                                        sorter.limitid = "pagelimit";
                                        sorter.init("producttable",1);
                                    </script>

						</div>
                       	</div>
                             
                    <!-- InstanceEndEditable -->
                </div>
                
          <div id="footer">
                    
                    <div id="copyright">
                    	<p>Copyright © 2011 Custom Equipment, Inc | <a href="../../sitemap.html">Sitemap</a></p>
                    </div>
                                      
                    <div id="social">
                    	<p class="textcenter"><a href="http://www.facebook.com/hybridlifts" target="_blank"><img src="../../images/fb20px.png" alt="Hy-Brid Facebook Page" /></a>   <a href="http://www.youtube.com/user/HyBridLifts" target="_blank"><img src="../../images/youtube20px.png" alt="Hy-Brid YouTube Page" /></a>   <g:plusone count="false"></g:plusone><script type="text/javascript">  (function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();</script></p>
                    </div>
                </div>
                
        	</div>   
                 
        </div>    
    
    </body>

<!-- InstanceEnd --></html>

 

getlocation.php

<? $model=$_GET['model'];
$link = mysql_connect('localhost', 'custkis6_dealers', 'locate'); //changet the configuration in required
if (!$link) {
    die('Could not connect: ' . mysql_error());
}
mysql_select_db('custkis6_parts');
$query="SELECT plocation FROM hybrid WHERE model='$model'";
$result=mysql_query($query);

?>
<select name="location" onchange="getfunit(<?=$model?>,this.value)">
<option>Select Machine Location</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value=<?=$row['plocation']?>><?=$row['plocation']?></option>
<? } ?>
</select>

 

getfunit.php

<? $modelId=$_GET['model'];
$locationId=$_GET['location'];
$link = mysql_connect('localhost', 'custkis6_dealers', 'locate'); //changet the configuration in required
if (!$link) {
    die('Could not connect: ' . mysql_error());
}
mysql_select_db('custkis6_parts');
$query="SELECT fcircuit FROM hybrid WHERE model='$modelId' AND plocation='$locationId'";
$result=mysql_query($query);

?>
<select name="funit">
<option>Select Functional Circuit</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value><?=$row['fcircuit']?></option>
<? } ?>
</select>

Link to comment
https://forums.phpfreaks.com/topic/250951-chained-select-boxs-phpajaxmysql/
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.

×
 Share
Go to topic listing
×
×
  • 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.