PHP AJAX Dropdown


 

PHP AJAX Dropdown

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 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>

0

</head>

<body>

<form>

1

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

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

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

2

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

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

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

3

</select>

</form>

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

4

</body>

</html>

drop-down.js

5

var xmlhttp

function showria(str){

xmlhttp=GetXmlHttpObject();

6

if (xmlhttp==null){

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

return;} 

7

var url="drop-down.php";

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

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

8

xmlhttp.onreadystatechange=stateChanged;

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

xmlhttp.send(null);}

9

function stateChanged(){

if (xmlhttp.readyState==4){

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

0

function GetXmlHttpObject(){

if (window.XMLHttpRequest){

return new XMLHttpRequest();}

1

if (window.ActiveXObject){

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

return null;}

2

Output:

Ads