Share on Google+Share on Google+

PHP AJAX Dropdown

Ads
In this current tutorial we will see how to connect a simple drop down menu and mysql table using php and JavaScript (Ajax as whole) and to display the related data on the screen from the table.

Ajax Drop-down list:

In this current tutorial we will see how to connect a simple drop down menu and mysql table using php and JavaScript (Ajax as whole) and to display the related data on the screen from the table.

In this tutorial we use three files to develop a dynamic web page. Go through each file carefully to understand each facet of the problem and the solutions as well.

Example:

drop-down.php

<?php

$con=mysql_connect("localhost","root","");

if(!$con){

die("Could not connect".mysql_error());}

mysql_select_db('ajax',$con);

$sql="select * from ria";

$result=mysql_query($sql,$con);

$r=$_GET['r'];

$array=array();

$ria="";

while($row=mysql_fetch_array($result)){

if(strtolower($r)==strtolower($row['ria_name'])){

echo "<b>Technology: </b>".$row['ria_name']."<br/>";

echo "<b>Company: </b>".$row['ria_company'];

}

}

?>

drop-down.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title></title>

<script type="text/javascript" src="drop-down.js">

</script>

</head>

<body>

<form>

Select any Rich Internet Application from here:<br/>

<select name="ria" onchange="showria(this.value)">

<option value="flex">Flex</option>

<option value="xul">XUL</option>

<option value="gwt">GWT</option>

<option value="javafx">JavaFx</option>

</select>

</form>

<div id="riaHint"></div>

</body>

</html>

drop-down.js

var xmlhttp

function showria(str){

xmlhttp=GetXmlHttpObject();

if (xmlhttp==null){

alert ("Your browser does not support AJAX!");

return;} 

var url="drop-down.php";

url=url+"?r="+str;

url=url+"&sid="+Math.random();

xmlhttp.onreadystatechange=stateChanged;

xmlhttp.open("GET",url,true);

xmlhttp.send(null);}

function stateChanged(){

if (xmlhttp.readyState==4){

document.getElementById("riaHint").innerHTML=xmlhttp.responseText;}}

function GetXmlHttpObject(){

if (window.XMLHttpRequest){

return new XMLHttpRequest();}

if (window.ActiveXObject){

return new ActiveXObject("Microsoft.XMLHTTP");}

return null;}

Output:

Advertisements

Posted on: February 13, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Ads

Advertisement