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;
?>
Output:
Similar Reads
How to take user input for two dimensional (2D) array in PHP ? There are two methods to take user input in PHP in two dimensional (2D) array. Approach 1:Â Use HTML forms through PHP GET & POST method to take user input in two dimensional (2D) array.First, input data into HTML forms.Then use the GET or POST method of PHP to get or post those input data into
3 min read
How to Insert JSON data into MySQL database using PHP? To insert JSON data into MySQL database using PHP, use the json_decode function in PHP to convert JSON object into an array that can be inserted into the database. Here, we are going to see how to insert JSON data into MySQL database using PHP through the XAMPP server in a step-by-step way. JSON Str
3 min read
How to create HTML form that accept user name and display it using PHP ? Through HTML forms various data can be collected from the user and can be sent directly to the server through PHP scripting. There are basically two methods for sending data to the server one is "GET" and the other one is "POST". In GET method, the data goes through the browser's URL and can be seen
2 min read
How to fetch data from the database in PHP ? Database operations in PHP are a very crucial thing that is especially needed in CRUD (Create, Read, Update and Delete) operations. In this article, we will discuss the Read part i.e. data fetching from database. There are two ways to connect to a database using PHP. They are as follows. MySQLi ("i"
4 min read
How to retrieve data from MySQL database using PHP ? There are steps to understand for retrieving the data from the MySQL database. Approach: Create the database, then create the table for data.Enter the rows in the table. You have to connect to the database. Now we understand each and every step as shown below.  Example 1: In this. we use PHPMyAdmin
2 min read
Create a drop-down list that options fetched from a MySQL database in PHP In many scenarios, we may need to create a dropdown input that can display all the options consistent with the current state of the database. This form of input is used many times in real life and the following examples may help to understand the same.A set of students who have unique registration n
4 min read
Insert data from one table to another table using PHP In this article, we are going to insert data into another table from the existing table using PHP. Requirements: XAMPP Webserver PHP stands for Hypertext preprocessor. MySQL is a database query language for performing database operations. We are going to insert data from one table into another table
2 min read
How to Update Data in MySQL Database Table Using PHP? Updating data in a MySQL database table using PHP is a fundamental aspect of web development, particularly in applications where user interactions involve modifying existing records. This guide delves into the process of updating data in a MySQL database table using PHP, covering database connection
3 min read
How to Upload Multiple Images and Text to MySQL Database in PHP? In web development, many times we need to handle multiple files at once while uploading and storing into the database. So in this article, we will see how to do this by various approaches to achieve this using PHP and MySQL. Table of Content Storing Images in the File SystemUsing Base64 EncodingAppr
4 min read
How to add more values to array on button click using PHP ? In this article, we will learn to add elements to an existing array with the click of a button using PHP. PHP is a server-side language, and it only responds to requests (GET, POST, PUT, PATCH, and DELETE). The button click action happens as a part of the client-side to directly call a PHP function.
3 min read