Home Tutorial Php Phpbasics Tutorial PHP AJAX Dropdown

 
 

Share on Google+Share on Google+
PHP AJAX Dropdown
Posted on: February 13, 2010 at 12:00 AM
Advertisement
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:

Advertisement

Related Tags for PHP AJAX Dropdown:


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.

Posted on: February 13, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com