PHP MySQL Table Inline Editing using jQuery Ajax

 

Click Here to Download 

 Index.php

<?php include('connection.php'); ?>

<div id="Profile" class="content">

<div id="rlt" style="text-align:center; color:red;"></div>

<?php $profile_sqls=mysql_query("SELECT * from registration  where id='93'");

while($pro_relt= mysql_fetch_array($profile_sqls)) {

$id = $pro_relt['id'];  ?>     

<form method="post" action="" name="editpro">

<div class="col-lg-6">

<div class="form-group input-group edit_tr" id="<?php echo $id; ?>">

<span class="input-group-addon"> Email </span>

<input class="form-control" type="text"  id="email_<?php echo $id; ?>"  value="<?php echo $pro_relt['email']; ?>" name="email" placeholder="Email">

</div>  </div>

<div class="col-lg-6" >

<div class="form-group input-group edit_tr" id="<?php echo $id; ?>" >

<span class="input-group-addon" > Name </span>

<input class="form-control" type="text" id="first_input_<?php echo $id; ?>" value="<?php echo $pro_relt['name']; ?>" name="name" placeholder="User Name">

</div> </div>

 </form>

<?php } ?>

 </div>  

Java Script 

<script type="text/javascript" src="https://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".edit_tr").change(function()
{
var ID=$(this).attr('id');
var name=$("#first_input_"+ID).val();
var email=$("#email_"+ID).val();

var dataString = 'id='+ID+'&name='+name+'&email='+email;
//alert(dataString);
if(name.length>0 && email.length>0 )
{
$.ajax({
type: "POST",
url: "save.php",
data: dataString,
cache: false,
success: function(html)
{
document.getElementById('rlt').innerHTML='Updated Successfully';
}
});
}
else
{
alert('Enter something.');
}
});
});
</script>

Save.php 

<?php
include("connection.php");
if($_POST['id'])
{
$id=mysql_escape_String($_POST['id']);
$firstname=mysql_escape_String($_POST['name']);
$email=mysql_escape_String($_POST['email']);
$sql = "update registration set name='$firstname', email='$email' where id='$id'";
mysql_query($sql);
}
?>

Connection.php

<?php
    $dbhost = "localhost";
    $dbusername = "root";
    $dbpassword = "";
    $dbname = "simple_inline_edit";
$connection = mysql_connect($dbhost, $dbusername, $dbpassword) or die('Could not connect');
$db = mysql_select_db($dbname);

?>


Click Here to Download