Index.php
<html>
<head>
<style>
#popup_box,#popup_box1,#popup_box2,#popup_box3,#popup_box4 {
display:none;
position:fixed;
_position:absolute;
height:300px;
width:600px;
background:#95CAFF;
left: 300px;
z-index:100;
border:2px solid #63b8ee;
font-size:15px;
-moz-box-shadow: 0 0 5px #0066FF;
-webkit-box-shadow: 0 0 5px #0066FF;
box-shadow: 0 0 5px #0066FF;
}
</style>
<script src="jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#popupBoxClose').click( function() {
unloadPopupBox();
});
function unloadPopupBox()
{
$('#popup_box').fadeOut("slow");
$("#container").css({
"opacity": "1"
});
}
$('#add').click( function()
{
loadPopupBox();
});
function loadPopupBox()
{
$('#popup_box').fadeIn("slow");
$("#container").css({ "opacity": "0.3" });
}
$('#addbutton').click(function()
{
var name=$('#nameadd').val();
var address=$('#addressadd').val();
$.get("check.php",{Name:name,Address:address,operation:"insert"},function(data)
{
});
loadPopupBox3();
});
function loadPopupBox3()
{
$('#popup_box3').fadeIn("slow");
$("#container").css({ "opacity": "0.3" });
}
$('#addpopup').click(function()
{
unloadPopupBox3();
});
function unloadPopupBox3()
{
$('#popup_box3').fadeOut("slow");
$("#container").css({
"opacity": "1"
});
}
$('.edit').click( function() {
var id = $(this).attr("id");
$.get("check.php",{Slno:id,operation:"updateselect"},function(data)
{
$("#registration").remove();
$("#popup_box1").append(data);
});
loadPopupBox1();
});
function loadPopupBox1()
{
$('#popup_box1').fadeIn("slow");
$("#container").css({ "opacity": "0.3" });
}
$('#save').click(function(){
var idsave=$('#idsave').val();
var name=$('#namesave').val();
var address=$('#addresssave').val();
$.get("check.php",{Id:idsave,Name:name,Address:address,operation:"update"},function(data)
{
});
loadPopupBox4();
});
function loadPopupBox4()
{
$('#popup_box4').fadeIn("slow");
$("#container").css({ "opacity": "0.3" });
}
$('#updatepopup').click(function()
{
unloadPopupBox4();
});
function unloadPopupBox4() {
$('#popup_box4').fadeOut("slow");
$("#container").css({
"opacity": "1"
});
}
$('.delete').click( function() {
var id = $(this).attr("id");
//alert(id);
$.get("check.php",{Slno:id,operation:"delete"},function(data)
{//2
$("#registration").remove();
$("#popup_box2").append(data);
});//2
loadPopupBox2();
});
function loadPopupBox2()
{
$('#popup_box2').fadeIn("slow");
$("#container").css({ "opacity": "0.3" });
}
});
</script>
</head>
<body>
<div id="container">
<button type="button" class="myButton1" id="add" >Add</button>
<div id="grid">
<?php
include_once 'dbcon.php';
connect();
$sql_grid=mysql_query("select * from tab");
echo "<table border=1>
<tr><th>ID</th><th>Name</th><th>Address</th><th>Action1</th><th>Action2</th></tr>";
while($test_grid=mysql_fetch_array($sql_grid))
{
echo"<tr id=".$test_grid['id']." class='sp'><td>".$test_grid['id']."</td><td>".$test_grid['name']."</td><td>".$test_grid['address']."</td><td><img src='img\edit.png' width='20' height='20' class='edit' id='".$test_grid['id']."'/></td><td><img src='img\del.jpg' width='20' height='20' class='delete' id='".$test_grid['id']."'/></td></tr>";
}
echo "</table>";
?>
</div>
</div>
</div>
<form method="post">
<div id="popup_box" > <!-- OUR PopupBox DIV-->
<a id="popupBoxClose"><button type="submit">X</button></a>
<div id="registration" style="width:700px;">
<h2>Account Detail</h2>
<form method="post">
<center>
Name:<input type="text" id="nameadd" class="text" value=""/><br>
Address:<input type="text" id="addressadd" class="text" value=""/><br>
<button id="addbutton" type="button" >Add</button>
</center>
</form>
</div>
</div>
</form>
<div id="popup_box3"> <!-- OUR PopupBox DIV-->
<a id="popupBoxClose3"><button type="submit" >X</button></a>
<div id="registration" style="width:700px;">
<h2>Account Detail</h2>
<form method="post">
<h3>Data Added Successfully</h3>
<button type="submit" id="addpopup" >Ok</button>
</form>
</div>
</div>
<form method="post">
<div id="popup_box1" > <!-- OUR PopupBox DIV-->
<a id="popupBoxClose1"><button type="submit">X</button></a>
<div >
<button class='myButton1' id='save' type='button' >Save</button>
</div>
</div>
</form>
<div id="popup_box4" > <!-- OUR PopupBox DIV-->
<a id="popupBoxClose5"><button type="submit" >X</button></a>
<div id="registration" >
<h2>Account Detail</h2>
<form id="RegisterUserForm" method="post">
<center>
<h3>Data Updated Successfully</h3>
<button type="submit" class="myButton1" id="updatepopup" >Ok</button>
</center>
</form>
</div>
</div>
<form method="post">
<div id="popup_box2" style="left:400px; top:200px; width:700px;"> <!-- OUR PopupBox DIV-->
<a id="popupBoxClose2"><button type="submit" style="width:20px; background:#009900; color:#FFFFFF; border-radius:5px; height:20px; margin-left:670px;">X</button></a>
</div>
</form>
</body>
</html>
____________________________________________________________________________
check.php
<?php
error_reporting(0);
if(isset ($_GET['operation']) && $_GET['operation']!='')
{
include_once 'dbcon.php';
connect();
$op=$_GET['operation'];
if($op=='insert')
{
$name_add=$_GET['Name'];
$address_add=$_GET['Address'];
$sql_insert=mysql_query("insert into tab values('','$name_add','$address_add')");
}
else if($op=='updateselect')
{
$Slno=$_GET['Slno'];
$sql_select=mysql_query("select * from tab where id='$Slno'");
while($test_select=mysql_fetch_array($sql_select))
{
$name_select=$test_select['name'];
$address_select=$test_select['address'];
}
echo "<div id='registration'>";
echo "<h2>Account Detail</h2>";
echo "<form id='RegisterUserForm' method='post'>";
echo "<center>";
echo "<table>";
echo "<tr>";
echo "<td><input type='hidden' id='idsave' class='text' value='$Slno'/></td><td></td>";
echo "</tr>";
echo "<tr>";
echo "<td class='lbltext'><label>Name</label></td><td><input type='text' id='namesave' class='text' value='$name_select'/></td><td></td>";
echo "</tr>";
echo "<tr>";
echo "<td class='lbltext'><label>Address</label></td><td><input type='text' id='addresssave' class='text' ' value='$address_select'/></td><td></td>";
echo "</tr>";
echo "<tr>";
echo "</table>";
echo "</center>";
echo "</form>";
echo "</div>";
}
else if($op=='update')
{
$Id_save=$_GET['Id'];
$Name_save=$_GET['Name'];
$Address_save=$_GET['Address'];
$sql_update=mysql_query("update tab set name='$Name_save',address='$Address_save' where id='$Id_save'");
}
else if($op=='delete')
{
$Slno=$_GET['Slno'];
$sql_delete=mysql_query("delete from tab where id='$Slno'");
if($sql_delete)
{
echo "<div id='registration' style='width:700px;'>";
echo "<h2>Account Detail</h2>";
echo "<form id='RegisterUserForm' method='post'>";
echo "<center>";
echo "<h3>Data Deleted Successfully</h3>";
echo "</center>";
echo "</form>";
echo "</div>";
}
else
{
echo "<div id='registration' style='width:700px;'>";
echo "<h2>Account Detail</h2>";
echo "<form id='RegisterUserForm' method='post'>";
echo "<center>";
echo "<h3>Data Not Deleted</h3>";
echo "</center>";
echo "</form>";
echo "</div>";
}
}
}
?>
_________________________________________________________________________
dbcon.php
<?php
function connect()
{
$server = 'localhost';
$uname = 'root';
$password = '';
$dbname = 'example';
mysql_connect($server, $uname, $password)
or die();
mysql_select_db($dbname);
}
?>
________________________________________________________________
