Labels

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)

Thursday, March 22, 2018

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.

Steps

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) 

CREATE 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
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

To insert data into the table

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



Connecting to database(config.php)


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

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


Fetching data(index.php)


<?php
include('config.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)) {
            extract($row);
            $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);
mysqli_close($connection);
?>



Parsing data with JQuery


//Script
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<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){
                        $('input[id='+key+']').val(value);
                    });
                }
            });
    });
}
</script>
//CSS
<style type="text/css">
    body{
        position: absolute;
        width: 600px;
        height: 200px;
        z-index: 15;
        top: 40%;
        left: 30%;
        margin: -100px 0 0 -150px;
    }
    .box{
        background: #43c181;
        padding-top: 10px;
        padding-left: 60px;
        padding-bottom: 30px;
        width: 500px;
        height: auto;
    }
    .btn-success{
        padding: 5px;
    }
</style>


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

Populating in the form


<body>

<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>

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

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

</form>

</div>

</body>

//Call function
<script>
userEdit(UserID = 7);
</script>


Result


*Please subscribe to PHP Javascript for more.

* Display JSON data in dropdown

Display JSON data in a table


6 comments:

  1. Hi,
    This is my first visit to your blog! I found your article very fantasy. Thanks for sharing this information. You have very good information about latest topic. You have given great information article that will be very useful for me. I want to know more information deeply about it.

    ReplyDelete
  2. Pretty blog, so many ideas in a single site, thanks for the informative article, keep updating more article.
    Webdesining course in chennai

    ReplyDelete
  3. great. I am confident there are many outstanding features coming soon.
    hotmail login account

    ReplyDelete

More Posts

FOLLOW