How to populate JSON data in input fields using Javascript in a best way?

Here we are discussing about how to populate JSON data in HTML input fields dynamically.This might be the best way to work on any kind of edit data/form operation.


1. Creating database and table
2. Connecting to database
3. Fetching data
4. Parsing data
5. Populating in the form

Creating database and table

Create a database(demo) make sure that you are using the right database name in your config.php file.

Run the following queries to create a table with some sample data

To create a table(user) 

  `UserID` int(12) NOT NULL,
  `FirstName` varchar(48) NOT NULL,
  `LastName` varchar(48) NOT NULL,
  `Email` varchar(128) NOT NULL,
  `Password` varchar(20) NOT NULL,
  `City` varchar(48) NOT NULL

To insert data into the table

INSERT INTO `user` (`UserID`, `FirstName`, `LastName`, `Email`, `Password`, `City`) VALUES
(7, 'Rahul', 'Rajshekaran', '', 'Rahul@123', 'Pune'),
(8, 'Mahesh', 'Krishna', '', 'Mahesh@123', 'Delhi'),
(9, 'Mahidar', 'kumar', '', 'Mahidar@123', 'Pune'),
(10, 'Mahpal', 'yadhav', '', 'Mahipa@123', 'Delhi');

Connecting to database(config.php)

/* Database connection start */
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = 'root';
$dbName = 'demo';

//Create connection and select DB
$connection = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
die("Unable to connect database: " . $connection->connect_error);

Fetching data(index.php)

//Check UserID set or not
if (isset($_GET['UserID'])) {
    $UserID = $_GET['UserID'];
    $sql = "SELECT * FROM user WHERE UserID='$UserID'";
    $result = mysqli_query($connection, $sql);
    if ((mysqli_num_rows($result)) > 0) {
        while ($row = mysqli_fetch_array($result)) {
            $rows[] = array("Message" => "Success", "UserID" => $UserID, "FirstName" => $FirstName, "LastName" => $LastName, "Email" => $Email, "City" => $City);
    } else {
        $rows[] = array("Message" => "No Data");
} else {
    $rows[] = array("Message" => "Error");
echo json_encode($rows);

Parsing data with JQuery

<script src=""></script>
function userEdit(UserID) {
    $(document).ready(function () {
        $.getJSON("http://localhost/demo/user.php?UserID=" + UserID,
            function (json) {
                for (var i = 0; i < json.length; i++) {
var Message = json[i].Message;
document.getElementById("Message").innerHTML = Message;
                    $.each(json[0] , function (key, value){
<style type="text/css">
        position: absolute;
        width: 600px;
        height: 200px;
        z-index: 15;
        top: 40%;
        left: 30%;
        margin: -100px 0 0 -150px;
        background: #43c181;
        padding-top: 10px;
        padding-left: 60px;
        padding-bottom: 30px;
        width: 500px;
        height: auto;
        padding: 5px;

*Place the above code in the head section of your HTML.

Populating in the form


<div class='box'>

<h4 id="Message"></h4>

<form action='#' method='post' id='Form' enctype='multipart/form-data'>

<div class="col-md-10">
            <label>First Name</label>
            <input type="text" id="FirstName" class="form-control" name="FirstName" placeholder='First Name'/>

 <div class="col-md-10">
            <label>Last Name</label>
            <input id="LastName" name="LastName" class="form-control" type="text" placeholder='Last Name'/>

 <div class="col-md-10">
            <input id="Email" name="Email" class="form-control" type="text"




//Call function
userEdit(UserID = 7);


*Please subscribe to PHP Javascript for more.

* Display JSON data in dropdown

Display JSON data in a table

1 comment:

  1. which is really a immature share of the problems a lot of people unrecorded with sect now, but but making improved lives for group that's direction on feat them much , keeping them punter aid and making certain their kids get enlightened.
    send cremated remains



php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Popular Posts