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.
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.
ReplyDeletesend cremated remains