Java Script

GEEKSFORGEEKS
How to fill all input fields automatically from

database by entering input in one textbox using PHP
?
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:
!"#"
!"#"
!"#"
$%"&%'()*&'+&,,
-&#".
/0,1
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
src=
https://code.jquery.com/jquery-3.2.1.min.js">
>
src=
://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
"text/javascript">
>
="stylesheet" href=
://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
src=
://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
>
class="container">
:
>GeeksForGeeks</h1>
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>
>
class="row">
<label>First Name:</label>
<input type="text" name="first_name"
id="first_name" class="form-control"
placeholder='First Name'
value="">
</div>
</div>
>
class="row">
<label>Last Name:</label>
<input type="text" name="last_name"
id="last_name" class="form-control"
placeholder='Last Name'
value="">
</div>
</div>
>
:
// 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();
}
>
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:
:
:
Your future in 2022 revealed
www.miss-angie.com
Article Tags : HTML PHP Technical Scripter Web Technologies PHP-Questions
Technical Scripter 2020
Practice Tags : HTML PHP
Read Full Article

:
710-B, Advant Navis Business Park,
Sector-142, Noida, Uttar Pradesh - 201305
feedback@geeksforgeeks.org
COMPANY
About Us
Careers
Privacy Policy
Contact Us
LEARN
Algorithms
Data Structures
Languages
CS Subjects
Video Tutorials
PRACTICE
Company-wise
Topic-wise
Contests
Subjective Questions
CONTRIBUTE
Write an Article
GBlog
Videos
@geeksforgeeks, Some rights reserved

:

Java Script

Uploaded by

Copyright:

Available Formats

Java Script

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Java Script

Uploaded by

Copyright:

Available Formats

GEEKSFORGEEKS

How to fill all input fields automatically from

Approach: We need to create a MySQL database in our localhost server using

How does it work?

Steps for execution:

Create your HTML webpage

// Creates a new XMLHttpRequest object

// Defines a function to be called when

// Typical action to be performed

// Returns the response data as a

// Assign the value received to

// xhttp.open("GET", "filename", true);

// Sends the request to the server

// Get the user id

if ($user_id !== "") {

// Get corresponding first name and

// Get the first name

// Get the first name

// Send in JSON encoded form

Article Tags : HTML PHP Technical Scripter Web Technologies PHP-Questions

Technical Scripter 2020

Practice Tags : HTML PHP

Read Full Article

@geeksforgeeks, Some rights reserved

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.