Populate form input elements(text-typed) when one of the field is entered, without refreshing the HTML form.

See more:

HTML

PHP

Ajax

JSON

I am unable to populate customer name, email and address fields in the html form after entering the customer_phone_number field.
when i enter the customer phone number and move the cursor out i want my script to send phone number to php file and fetch data from customers table in the database and send it to the script and the script to populate the html input fields without refreshing the page so that i can fill other fields and submit the form.

the code that i tried is not fetching any data. please help me getting my code working.

What I have tried:

this is my ajax code

function showUser(str) {
  if (str=="") {
    document.getElementById("full_name").innerHTML="";
	document.getElementById("email").innerHTML="";
	document.getElementById("address").innerHTML="";
	
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
		var myObj = JSON.parse(this.responseText);
        document.getElementById("full_name").innerHTML = myObj.full_name;
        document.getElementById("email").innerHTML=myObj.email;
		document.getElementById("address").innerHTML=myObj.address;
    }
  }
  xmlhttp.open("GET","getinfo.php?q="+str,true);
  xmlhttp.send();
}

this is my html code

		<form name="testform">
		
		<h1> customer information </h1>
		Order_no:
		<input type="text" name = "order_no" id="order_no"><br>
		<!-- i was able to auto generate the order_no field with the last record table in the database -->
		customer_phone_number:
		<input type="text" name="customer_phone_number" id="customer_phone_number" onpointermove="showUser(this.value)"><br>
		customer_full_name:
		<input type="text" name="full_name" id="full_name"><br>
		customer_email:
		<input type="text" name="email" id="email"><br>
		customer_address:
		<input type="textarea" name="address" id="address"><br>
		
	   <!-- i will be taking many other information for my application-->
		<input type="submit" name="save" value = "save">

</form>

this is my php code getinfo.php

<?php

	$host = 'localhost';
	$user = 'root';
	$pass = '';
	$dbname = 'yukba';
	
	$conn = mysqli_connect( $host,$user,$pass,$dbname );
	$q = $_GET['q'];
	$myObj->full_name = "";
	$myObj->email = "";
	$myObj->address = "";
	
	if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
	}
	
	$sql = "SELECT FULL_NAME,EMAIL,ADDRESS FROM customers WHERE CUSTOMER_PHONE_NUMBER= {$q}";
	$result = mysqli_query($conn, $sql);
	
	if (mysqli_num_rows($result) > 0) {
    
    while($row = mysqli_fetch_assoc($result)) {
	
	$myObj->full_name = $row['FULL_NAME'];;
	$myObj->email = $row['EMAIL'];
	$myObj->address = $row['ADDRESS'];
	
	$myJSON = json_encode($myObj);

	echo $myJSON;
        
    }
	} else {
    echo "0 results";
	}

?>