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
When it comes to finding the Best Forex Trading Platform in India, Winprofx stands out as a trusted and beginner-friendly choice for both new and experienced traders. Designed with Indian traders in mind, Winprofx offers a seamless trading experience with advanced tools, real-time analytics, fast execution, and low spreads, making it one of the top-performing forex platforms in 2025. Whether you're looking to trade major currency pairs, explore commodities, or learn the ropes through demo accounts, Winprofx provides a secure and transparent environment that prioritizes your growth. What truly sets it apart is its focus on forex education—ideal for Indian traders who want to develop strong trading skills and strategies before risking real money. With multilingual customer support, INR-based deposits, and access to some of the Top Forex Brokers, Winprofx bridges the gap between global opportunities and local convenience. It supports quick withdrawals, advanced charting tools, and even funded account options for those who qualify. If you're looking to trade confidently in the dynamic forex market while enjoying local support and international-level features, Winprofx is undeniably the Best Forex Trading Platform in India to consider in 2025.
ReplyDeleteBest Forex Trading Platform in India-