You are here: Home » JQuery » fetch data without page refresh in php

fetch data without page refresh in php

28 Flares 28 Flares ×

To fetch data without page refresh, we have to use jquey.
Suppose, you have to display a list of places according to Country selection.

Call a function on onChange=”show_place();” on country selection.
in show_place() function, get country id, create a page ajax_place.php, send country id on ajax_place.php.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
function show_place()
{
 var country=document.getElementById('country').value;	
  
	if(country!='')
	{
	uri = "ajax_place.php?country="+country; 
	//uri = "ajax_product.php?country="+country+"&client="+client;  
	$.ajax({
		  url: uri,
		  success: function(data){
		  document.getElementById("all_place").innerHTML =data;
		   }
	});	
  }	
}
</script>
</head>

<body>
<form action="" method="post">
<table border="1">
<tr><td>Country:-</td><td> <select name="country" id="country" onChange="show_place();"  >
							     <option value="">Select</option>
                               <option value="1">India</option>
                               <option value="2">Nepal</option>
                           </select></td></tr>
                 
                 <tr><td>Place:-</td><td id="all_place">
                                  <select name="place" id="place"   >
							     <option value="">Select</option>
                          		 </select>
                
                 </td></tr>
</table>
</form>
</body>
</html>

On ajax_product.php, fetch data according to country from database, here i am showing static data according to condition.
Result return in data, define this data with innerHTML on id all_place.

<?
$country=$_REQUEST['country'];

if($country)
{
if($country==1)
{
?>
<select name="place" id="place"   >
					           <option value="">Select</option>
                               <option value="1">New Delhi</option>
                               <option value="2">Jaipur</option>
 </select>

<?	
}
else
{
?>

<select name="place" id="place"   >
							     <option value="">Select</option>
                               <option value="1">Pokhra</option>
                               <option value="2">Kathmandu</option>
     			 </select>
<?	
}
}

?>

About Abhishek Sinha

I am Abhishek and I love to code on PHP.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Scroll To Top
28 Flares Twitter 2 Facebook 2 Google+ 18 StumbleUpon 2 Pin It Share 0 LinkedIn 4 28 Flares ×