facebook like comment script using php, jquery and ajax

Facebook like comment system using ajax and php is nice and user appealing to comment on post, with the huge help of php and ajax you can build comment system system like facebook and add to your website
Demo Download

We are going to create two php file

1. index.php
2. ajaxcomment.php

Html form 

Create new php file index.php copy and paste this code on it, don’t forget to include jquery library

<form class="form-inline" action="" method="post"> 
        <div class="form-group"> <label for="comment">Comment Text</label> <br>
        <textarea name="comment" id="comment" class="form-control"></textarea><br>
        <div class="form-group"> <label for="name">Name</label> <br/>
        <input type="text" id="username" name="username" class="form-control" placeholder="Doe"> </div><br><br>
        <button type="submit" class="btn btn-primary comment_submit">Send invitation</button> 
      </form>

This file contain simple html form

PHP comment script

Create new php file ajaxcomment.php copy and paste this code on it

<?php
// include your database configuration file

if (isset($_POST) && ($_POST!="")) {
 $username=htmlentities($_POST['username']);
 $comment=($_POST['comment']);
 $time=date('s');

 //$db->query("INSERT INTO comment (username, commenttext) VALUES ('$username', '$comment') "); 

echo '<div>
 <strong>'.$username.'</strong> says: '.$comment.'- {'.$time.' sec}
 </div><br>';
}

This return the values of  form

Ajax Script

Copy and paste this code at the end of the form

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

$(".comment_submit").click(function() { // if user click on comment button carry the below actions
var username = $("#username").val(); // get username value
var comment = $("#comment").val(); // get comment value
 
    var dataString = 'comment=' + comment +'&username=' + username; //assign for ajax call
  
  if(comment=='' || username=='') // if comment and username is empty trigger alert
     {
    alert('Please Enter Content');
     }
  else //else trigger ajax call
  {
  $("#flash").fadeIn(400).html('<img src="ajax.gif">'); //show flash on div with delay
$.ajax({
    type: "POST", // ajax call type post
  url: "ajaxcomment.php", // page to tranfer our information without pageload
   data: dataString, //call our variable to process data
  cache: false,
  success: function(html){ // if successfull

   //append to comment-list {id}
  $("#comments-list").append(html); //display comment and username
    $("#comment").val(''); //empty comment field
     $("#username").val(''); //empty comment field
 
  $("#flash").hide(); // hide flash
  
  }
 });
}
return false;
  });
});

</script>

The ajax change the text of a div after ajax call, this happen when user click comment button.
Demo Download
Thanks for been here with me....

• Tweet
• Share
• Share
• Share