Ajax Add a Record with Button Status Change using jQuery

I like Facebook and Twitter API method of clicking follow, add a friend button. You click the button, the button status changed to 'You following' and 'Remove' at the same time request inserted into database. I had designed this tutorial using Ajax and jQuery.

Javascript Code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js">
</script>

<script type="text/javascript">
$(function() {

$(".follow").click(function(){
var element = $(this);
var noteid = element.attr("id");
var info = 'id=' + noteid;

$.ajax({
type: "POST",
url: "follow.php",
data: info,
success: function(){}
});

$(this).html('<span class="youfollowing_b"> You Following </span><a href=""><span class="block_b"> block </span></a>');

return false;
});
});

</script>

We can using CSS code like this.

$(this).css('background','images/youfollowing.png');

PHP Code
follow.php inserting value $id.

<?php

if (isset($_POST['id']))
{
$id=$_POST['id'];
$sql='insert into friends(user_id) values('.(int)$id.')';
mysql_query($sql);
}

?>

CSS Code

.follow_b
{
background-color:#285694;
font-size:11px;
padding-left:9px;
padding-right:9px;
color:#FFFFFF;
}

.youfollowing_b
{
background-color:#598724;
font-size:11px;
padding-left:9px;
padding-right:9px;
color:#FFFFFF;
}

.block_b
{
background-color:#fdd6d9; font-size:10px;
padding-left:9px;
padding-right:9px;
color:#000000;
border:solid 1px #000000;
margin-left:190px;
}

Parthiv Patel

Bhaishri Info Solution

Sr. PHP Developer

Limdi Chowk, AT PO. Nar, Di. Anand

Nar, Gujarat

388150

India

pparthiv2412@gmail.com

7383343029

DOB: 12/24/1986