In-Place Form Editing using jQuery ~ Web Speaks

As a web developer you often need to play with form submissions and form editings. But at times form editing is required, it becomes very clumsy to write separate codes for editing form and submitting form. Here we will see how in-place form editing is performed so that user does not has to navigate to a separate page for form editing. Also it is very fast as only the required field can be edited irrespective of the complete form edition. Take a look at it...

Live Demo Download Script

HTML MARKUP

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>WebSpeaks.in</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div id="main">
 <ul id="user1">
  <li>
   Name: <div class="edit" name="name">Arvind Bhardwaj<a href="javascript:void(0);" class="edit_link" name="edit">Edit</a></div>
  </li>
  <li>
   Email: <div class="edit" name="email">bhardwajsonheight@gmail.com<a href="javascript:void(0);" class="edit_link" name="edit">Edit</a></div>
  </li>
  <li>
   Website: <div class="edit" name="website">http://webspeaks.in<a href="javascript:void(0);" class="edit_link" name="edit">Edit</a></div>
  </li>
 </ul>
</div>
</body>
</html>

JavaScript Code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
 $('.edit').hover(function(){
  $(this).children('a.edit_link').show();
 }, function (){
  $(this).children('a.edit_link').hide();
 });
 
 $('a[name=edit]').live('click', function(){
  var prev = $(this).parent().html();
  $par = $(this).parent();
  $par.data('htm', prev);
  var text = $par.text();
  var htm = '<input type="text" class="edit_box" value="'+text.slice(0, text.length-4)+'" /><a href="javascript:void(0);" class="edit_link" name="save">Save</a><a href="javascript:void(0);" class="edit_link" name="cancel">Cancel</a>';
  $par.empty().html(htm);
 });

 $('a[name=save]').live('click', function(){
   var id = $(this).parent().parent().parent().attr('id');
   var type = $(this).parent().attr('name');
   var value = $(this).parent().children(':first').val();
   if(value != '')
   {
    $.ajax({
    type: "POST",
    url: "save.php",
    data: 'id='+id+'&type='+type+'&value='+value,
    cache: false,
    beforeSend: function()
    {
     $('a[name=save]').attr('disabled', 'disabled');
     $('a[name=save]').parent().children(':first').attr('disabled', 'disabled');
    },
    success: function(data)
    {
     $('a[name=save]').parent().empty().html(data);
    }
   });
  }
 });

 $('a[name=cancel]').live('click', function(){
  $par = $(this).parent();
  $par.html($par.data('htm'));
  $par.children('a[name=edit]').hide()
 });
});
</script>

CSS Code

div#main {margin:0; padding:0; background-color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px;color:#ffffff;}
div#main ul {list-style-type:none;}
div#main ul li {padding:10px 10px 10px 10px; }
div#main ul li div.edit { font-weight:bold; padding-top:5px; }
div#main .edit_link { font-size:10px; padding-left:10px; font-weight:normal; text-decoration:none; display:none; color:#FF0000;}
div#main .edit_box { height:30px; width:300px; font-size:14px; padding:3px; -moz-border-radius: 4px 4px 4px 4px; -moz-box-shadow: 0 1px 0 #444444;}

save.php

<?php
if($_POST['id'] != '')
{
 mysql_connect('<host>','<user>','<pass>');
 mysql_select_db('<database>');

 if($_POST['type'] == 'name')
 {
  mysql_query("UPDATE <tablename> SET `name`='".mysql_real_escape_string($_POST['value'])."' WHERE id='".mysql_real_escape_string($_POST['id'])."'");
  echo stripslashes($_POST['value']);
 }
 elseif($_POST['type'] == 'email')
 {
  mysql_query("UPDATE <tablename> SET `email`='".mysql_real_escape_string($_POST['value'])."' WHERE id='".mysql_real_escape_string($_POST['id'])."'");
  echo stripslashes($_POST['value']);
 }
 elseif($_POST['type'] == 'website')
 {
  mysql_query("UPDATE <tablename> SET `website`='".mysql_real_escape_string($_POST['value'])."' WHERE id='".mysql_real_escape_string($_POST['id'])."'");
  echo stripslashes($_POST['value']);
 }
}
?>

In-Place Form Editing using jQuery

1 comments: