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


13 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
  4. Nice post. Thanks for sharing! I want people to know just how good this information is in your article. It’s interesting content and Great work.
    Thanks & Regards,
    VRIT Professionals,
    No.1 Leading Web Designing Training Institute In Chennai.

    And also those who are looking for
    Web Designing Training Institute in Chennai
    Photoshop Training Institute in Chennai
    PHP & Mysql Training Institute in Chennai
    SEO Training Institute in Chennai
    Android Training Institute in Chennai

    ReplyDelete
  5. Great work! This is the type of info that should be shared around the web. Shame on the search engines for not positioning this post higher! Come on over and visit my web site . Thanks =) web development firm singapore

    ReplyDelete
  6. Youre so cool! I dont suppose Ive learn anything like this before. So good to search out any person with some authentic thoughts on this subject. realy thank you for beginning this up. this web site is one thing that's wanted on the net, somebody with a bit of originality. helpful job for bringing one thing new to the web! 个人陈述

    ReplyDelete
  7. Thanks for such a continuous great postings. We are also provide Digital Signature Certificate in Delhi

    ReplyDelete
  8. Nice Article, Thanks For Sharing This, Very Interesting And Helpful Support Provide By this blog, This was the first news blog. Class 2 Digital Signature Certificate

    ReplyDelete
  9. Thanks for sharing the relevant information with us…It are good for us. Apply Class 3 Digital Signature Certificate

    ReplyDelete

More Posts

FOLLOW