javascript - use one text field to search database, then pupulate remaining fields in PHP -

i'm new here, hope makes sense new php , ajax...so quite lost.

i have mysql database setup, , several forms created in php. have several text fields on 1 of forms, supposed show customer info. first text (phone #) field supposed search field ... need query database once user finishes entering phone #, find records , populate remaining fields.

i've tried various ways of doing this...but nothing comes out quite right! method seems show promise using onblur event call php page (using ajax) perform search.

this works, in can query database find results .. , have them displayed back. trouble page data inside displayed in middle of first page ...so have 1 web page displaying inside other...which not want.

the basic code have is:

html side --

    <script>     function showuser(str) {         if (str == "") {             document.getelementbyid("divider").innerhtml = "";             return;         }         if (window.xmlhttprequest) {// code ie7+, firefox, chrome, opera, safari             xmlhttp = new xmlhttprequest();         }         else {// code ie6, ie5             xmlhttp = new activexobject("microsoft.xmlhttp");         }         xmlhttp.onreadystatechange = function () {             if (xmlhttp.readystate == 4) {                 document.getelementbyid("divider").innerhtml = xmlhttp.responsetext;             }         }         xmlhttp.open("get", "getcustomer.php?q="+str, true);         xmlhttp.send();     } </script> </head>   <label for="custphone">phone:</label>   <input type="text" name="custphone" id="custphone" tabindex="1" onchange="showuser(this.value)" value="<?php  ?>">                        <br>    <div id="divider"></div>  <label for="custlastname">last name:</label>    <input type="text" name="custlastname" id="custlastname" tabindex="2" value="<?php echo $clast;  ?>">    &nbsp;&nbsp;&nbsp;&nbsp;    <label for="custfirstname">first name:</label>    <input type="text" name="custfirstname" id="custfirstname" tabindex="3" value="<?php echo $cfirst;  ?>">     <p>&nbsp;</p>     <label for="custaddress1">address 1:</label>    <input type="text" name="custaddress1" id="custaddress1" tabindex="4" value="<?php echo $caddr1; ?>">      &nbsp;&nbsp;&nbsp;&nbsp;     <label for="custaddress2">address2:</label>     <input type="text" name="custaddress2" id="custaddress2" tabindex="5" value="<?php echo $caddr2; ?>">      <p>&nbsp;</p> 

and php --

include ("addedit.php"); require_once("customer_info.php");  function loaddata() { $pn = $_post['custphone'];  if (strlen($pn) < 10) {     $query = "select * customer phone='$pn'";     $result = mysql_query($query);      if (!$result) die ("database access failed: " . mysql_error());     $rows = mysql_num_rows($result);     $rowinfo = mysql_fetch_array($result);       if ($rows > 0)     {         $clast = $rowinfo['lastname'];         $cfirst = $rowinfo['firstname'];         $caddr1 = $rowinfo['address1'];         $caddr2 = $rowinfo['address2'];         $ccity = $rowinfo['city'];         $cprov = $rowinfo['province'];         $cpostal = $rowinfo['postal'];     } } 

}

any ideas how can without jumping around ... or more importantly show data on existing page, rather showing smaller version of entire page within page ??

thx!!!

i recommend use jquery ajax, more simple , easy way ajax.
more details, refer jquery ajax. can change ajax call follows :

$.ajax({             type: "post",             url:"getcustomer.php",             data: "q="+str,             success : function(data) {                 //do someting data                 }             }          }); 

with can handle error state display "in progress" bar while ajax call in progress.

in success need map data fields in form instead of displaying them inside div. thing missing in approach. instead of following line -

document.getelementbyid("divider").innerhtml = xmlhttp.responsetext; 

add js code map data fields.

you can use json datatype , map data forms.