Hi i want to retrieve data from mysql database using ajax and php. my code is below which does not work

here is index.html

<!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>
var url = "getCustomerData.php?id=";
var xhr = false;

if(window.XMLHttpRequest)
{
   xhr = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
   xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

 function handleHttpResponse()
 {   
        if (xhr.readyState == 4 && xhr.status == 200)
      {
              var results=xhr.responseText;
              document.getElementById('divCustomerInfo').innerHTML = results;
        }
 }
 
  function requestCustomerInfo()
  {     
            var sId = document.getElementById("txtCustomerId").value;
            xhr.open("GET", url + escape(sId), true);
            xhr.onreadystatechange = handleHttpResponse;
            xhr.send(null);
  }
</script>
</head>

<body>
<p>Enter Customer ID to retriew Information.</p>
<form method="post" action="getCustomerData.php">
<p>Customer ID: <input type="text" id="txtCustomerid" value="" /></p>
<p><input type="button" value="Get Customer Info" onclick="requestCustomerInfo()" /></p>
</form>
<div id="divCustomerInfo"></div>
</body>
</html>

here is display.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>
</head>

<body>
<?php
$id = $_GET['id'];
echo $id;

$connect = mysql_connect("localhost","user","pass");
mysql_select_db("customers");
$query = "select * from customer where id=$id";
$result = mysql_query($query);

while($row = mysql_fetch_assoc($result))
{
   echo $row['name']."<br>";
   echo $row['address']."<br>";
   echo $row['phone'];
}
?>
</body>
</html>

please help me

Firstly, "Does not work" is very unspecific. Please explain what it's doing and what it's supposed to do and you're more likely to get an explaination on what your problem is.

Secondly, I don't think content put in a webpage with element.innerHTML should have <html> tags. My suggestion would be to remove everything outside of the <?php ?> tag from display.php.

Thirdly, which files' contents did you paste? You mentioned display.php in your post, but your code refers to getCustomerData.php.

Fourthly, you shouldn't use the same file for AJAX requests and form actions. AJAX responses should be short and simple, while form actions usually include some headers and footers. You can include() the AJAX page from the form page, but don't put anything pointless (like <html> tags) in the AJAX one.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.