How to fill all input fields automatically from database by entering input in one textbox using PHP ?

Last Updated : 08 Feb, 2021

XAMPP is a free and open-source cross-platform web server solution developed by Apache Friends, consisting mainly of the Apache HTTP Server, MySQL database, and interpreter for scripts written in the PHP programming language. The XAMPP server helps to start Apache and MySQL and connect them with the PHP file.

Approach: We need to create a MySQL database in our localhost server using the phpMyAdmin tool. We create an HTML form containing input fields that are linked with PHP code. PHP is used to connect with the localhost server and fetch the data from the database table by executing the MySQL queries. Refer to the GFG article: PHP program to fetch data from localhost server database using XAMPP

Consider, we have a database named gfg, a table named userdata. To fetch data from the database without page reload or submit for other input fields corresponding to the user entry of one field is implemented below. The data fetched is displayed in the same HTML form.

Creating Database:

How does it work?

The XMLHttpRequest object can be used to request data from a web server, update a web page without reloading the page. You can fire call on the key up, key down, or on blur of the first text box.

Example: Suppose you enter the user_id in the respective input field. If the user_id is present in the database then the XMLHttpRequest object gets the value of the first_name and last_name corresponding to that user_id from the database. It replaces the innerHtml of the other input textboxes with the data you get in the response.

Steps for execution:

Create your HTML webpage

HTML

<html> 
  
<head> 
    <script src= 
        "https://code.jquery.com/jquery-3.2.1.min.js"> 
    </script> 
  
    <script src= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        type="text/javascript"> 
    </script> 
      
    <link rel="stylesheet" href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
  
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="container"> 
        <h1>GeeksForGeeks</h1> 
        <div class="row"> 
            <div class="col-lg-6"> 
                <div class="form-group"> 
                    <label>User Id</label> 
                    <input type='text' name="user_id" 
                        id='user_id' class='form-control'
                        placeholder='Enter user id'
                        onkeyup="GetDetail(this.value)" value=""> 
                </div> 
            </div> 
        </div> 
        <div class="row"> 
            <div class="col-lg-6"> 
                <div class="form-group"> 
                    <label>First Name:</label> 
                    <input type="text" name="first_name" 
                        id="first_name" class="form-control"
                        placeholder='First Name'
                        value=""> 
                </div> 
            </div> 
        </div> 
        <div class="row"> 
            <div class="col-lg-6"> 
                <div class="form-group"> 
                    <label>Last Name:</label> 
                    <input type="text" name="last_name" 
                        id="last_name" class="form-control"
                        placeholder='Last Name'
                        value=""> 
                </div> 
            </div> 
        </div> 
    </div> 
    <script> 
  
        // onkeyup event will occur when the user  
        // release the key and calls the function 
        // assigned to this event 
        function GetDetail(str) { 
            if (str.length == 0) { 
                document.getElementById("first_name").value = ""; 
                document.getElementById("last_name").value = ""; 
                return; 
            } 
            else { 
  
                // Creates a new XMLHttpRequest object 
                var xmlhttp = new XMLHttpRequest(); 
                xmlhttp.onreadystatechange = function () { 
  
                    // Defines a function to be called when 
                    // the readyState property changes 
                    if (this.readyState == 4 &&  
                            this.status == 200) { 
                          
                        // Typical action to be performed 
                        // when the document is ready 
                        var myObj = JSON.parse(this.responseText); 
  
                        // Returns the response data as a 
                        // string and store this array in 
                        // a variable assign the value  
                        // received to first name input field 
                          
                        document.getElementById 
                            ("first_name").value = myObj[0]; 
                          
                        // Assign the value received to 
                        // last name input field 
                        document.getElementById( 
                            "last_name").value = myObj[1]; 
                    } 
                }; 
  
                // xhttp.open("GET", "filename", true); 
                xmlhttp.open("GET", "gfg.php?user_id=" + str, true); 
                  
                // Sends the request to the server 
                xmlhttp.send(); 
            } 
        } 
    </script> 
</body> 
  
</html> 

2. Get the requested user_id , execute the MySQL query to fetch the corresponding data for that user_id from the database table and print the data in JSON form back to the server in gfg.php file.

PHP

<?php 
  
// Get the user id  
$user_id = $_REQUEST['user_id']; 
  
// Database connection 
$con = mysqli_connect("localhost", "root", "", "gfg"); 
  
if ($user_id !== "") { 
      
    // Get corresponding first name and  
    // last name for that user id     
    $query = mysqli_query($con, "SELECT first_name,  
    last_name FROM userdata WHERE user_id='$user_id'"); 
  
    $row = mysqli_fetch_array($query); 
  
    // Get the first name 
    $first_name = $row["first_name"]; 
  
    // Get the first name 
    $last_name = $row["last_name"]; 
} 
  
// Store it in a array 
$result = array("$first_name", "$last_name"); 
  
// Send in JSON encoded form 
$myJSON = json_encode($result); 
echo $myJSON; 
?> 