Judul : UPDATE AND DELTE HIDDEN CONCEPT USING AJAX & JQUERY
link : UPDATE AND DELTE HIDDEN CONCEPT USING AJAX & JQUERY
UPDATE AND DELTE HIDDEN CONCEPT USING AJAX & JQUERY
========================================================================
HIDDEN CONCEPT USING AJAX & JQUERY:
========================================================================
HIDDEN CONCEPT USING AJAX & JQUERY:
========================================================================
First create table :
Create table abc
(id int primary key auto_increment ,
fullname varchar(200),
email varchar(200),
password varchar(200)
);
Then insert at least 5 records in your table.
(1)write code for display.php file:
<html>
<head>
<!—download--- jquery.min.js --- file –from-- jquery.com----->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="update.js"> </script>
<script type="text/javascript" src="delete.js"> </script>
</head>
<?php
$con=mysqli_connect("localhost","root","","databasename");
$sql="select * from abc";
$result=mysqli_query($con,$sql);
echo '<table border=1>
<tr><td>id</td>
<td>fullname</td>
<td>email</td>
<td>password</td>
<td> </td><td> </td></td></tr>';
while($row=mysqli_fetch_array($result))
{
echo '<tr>';
echo '<td>';
echo $row['id'];
echo '</td>';
echo '<td>';
echo $row['fullname'];
echo '</td>';
echo '<td>';
echo $row['email'];
echo '</td>';
echo '<td>';
echo $row["password"];
echo '</td>';
echo '<td>
<form id="update" action="" method="post">
<input type="hidden" name="hidden" value="'.$row['id'].'">
<input type="submit" name="submit" value="update"> <br></br>
</form>
</td>';
echo '<td>
<form id="delete" action="" method="post">
<input type="hidden" name="hidden" value="'.$row['id'].'">
<input type="submit" name="submit" value="delete"> <br></br>
</form>
</td>';
echo '</tr>';
}
echo'</table>';
?>
<div id=update_status> </div>
<div id=delete_status> </div>
<div id=final-update_status> </div>
(2)write code for update.js file:
$(document).ready(function (event) {
// triggered when the form submitted
$("#update").on('submit',(function(event) {
event.preventDefault();
$("#update_status").empty();
$.ajax({
// URL to move the uploaded image file to server
url: "update.php",
// Request type
type: "POST",
// To send the full form data
data: new FormData(this),
contentType: false,
processData:false,
// UI response after the file upload
success: function(data)
{
$("#update_status").html(data);
}
});
}));
// Triggered when the image changed (browse)
// Function to show the image as a preview
});
(3)write code for update.php file:
<html>
<head>
<script type="text/javascript" src="final-update.js"></script>
</head>
<?php
$hidden=$_POST["hidden"];
$con=mysqli_connect("localhost","root","","zaid");
$sql="select * from abc where id='$hidden'";
$result=mysqli_query($con,$sql);
while($row=mysqli_fetch_array($result))
{
echo '<form id="final-update" action="" method="post">';
echo 'fullname<input type="text" name="fullname" value="'.$row['fullname'].'">';
echo '
email<input type="text" name="email" value="'.$row['email'].'">';
echo '
password<input type="text" name="password" value="'.$row['password'].'"> ';
echo '
<input type="hidden" name="hidden" value="'.$row['id'].'">';
echo '
<input type="submit" value="update" name="update">';
echo '</form>';
}
?>
(4)write code for final-update.js:
$(document).ready(function (event) {
// triggered when the form submitted
$("#final-update").on('submit',(function(event) {
event.preventDefault();
$("#final-update_status").empty();
$.ajax({
// URL to move the uploaded image file to server
url: "final-update.php",
// Request type
type: "POST",
// To send the full form data
data: new FormData(this),
contentType: false,
processData:false,
// UI response after the file upload
success: function(data)
{
$("#final-update_status").html(data);
}
});
}));
// Triggered when the image changed (browse)
// Function to show the image as a preview
});
(6)write code for final-update.php file:
<?php
$con=mysqli_connect("localhost","root","","zaid");
$hidden=$_POST['hidden'];
$fullname=$_POST['fullname'];
$email=$_POST['email'];
$password=$_POST['password'];
$sql="update abc set fullname='$fullname', email='$email',password='$password' where id='$hidden'";
$result=mysqli_query($con,$sql);
if($result)
{
echo "data update successfully";
}
else
{
echo "data not update";
}
?>
(6)write code for delete.js file:
$(document).ready(function (event) {
// triggered when the form submitted
$("#delete").on('submit',(function(event) {
event.preventDefault();
$("#delete_status").empty();
$.ajax({
// URL to move the uploaded image file to server
url: "delete.php",
// Request type
type: "POST",
// To send the full form data
data: new FormData(this),
contentType: false,
processData:false,
// UI response after the file upload
success: function(data)
{
$("#delete_status").html(data);
}
});
}));
// Triggered when the image changed (browse)
// Function to show the image as a preview
});
(7)write code for delete.php file:
<?php
$hidden=$_POST["hidden"];
$con=mysqli_connect("localhost","root","","zaid");
$sql="delete from abc where id='$hidden'";
$result=mysqli_query($con,$sql);
if($result)
{
echo "record deleted successfully";
}
else
{
echo "record not delete";
}
?>
Demikianlah Artikel UPDATE AND DELTE HIDDEN CONCEPT USING AJAX & JQUERY
Sekianlah artikel UPDATE AND DELTE HIDDEN CONCEPT USING AJAX & JQUERY kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel UPDATE AND DELTE HIDDEN CONCEPT USING AJAX & JQUERY dengan alamat link https://othereffect.blogspot.com/2017/01/update-and-delte-hidden-concept-using.html
0 Response to "UPDATE AND DELTE HIDDEN CONCEPT USING AJAX & JQUERY"
Post a Comment