Solved

How to do an AJAX Dropdown

Posted on 2011-09-30
2
186 Views
Last Modified: 2012-06-21
I need to have database-driven dropdown menu, like this one:
echo "<select>";
for($i=0; $i<$num;$i++){
   echo "<option value=\"".trim($row[$i])."</option>\n";
}
echo "</select>";

Open in new window

When an option is selected, I need to run a query to fill a DIV with content from a database.  Can anyone help me with this?


0
Comment
Question by:EMB01
2 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 36893943
Put this in the head section :
<script language="javascript" type="text/javascript">
	function runAQueryToFillADIVWithContentFromADatabase(PID) {
		if(PID.length==0) {
			document.getElementById("DIV_ID").innerHTML="";
			return true;
		}
		var xmlhttp;
		if(window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		if(xmlhttp==null) {
			alert("your browser don't support Ajax");
		}
		xmlhttp.onreadystatechange = function() {
			if(xmlhttp.readyState==4 && xmlhttp.status==200) {
				document.getElementById("DIV_ID").innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("GET","getDatabaseDrivenDropdownMenu.php?pid=" + PID,true);
		xmlhttp.send();
	}
</script>

Open in new window


your div (to fill with the dynamic dropdown):
<div id="DIV_ID"></div>

your first dropdown need to have :

<select onchange="runAQueryToFillADIVWithContentFromADatabase(this.value)">

the value of the option (this.value) can be used by the server side (your php script to select/filter some of the data and build the option)

Need more infos?
Take your time to read this tuto for example : http://www.w3schools.com/ajax/default.asp
0
 
LVL 14

Author Closing Comment

by:EMB01
ID: 36903042
Perfect, very simple implementation.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question