Desire Code

Android Tutorial , Programming Tutorial, Php Tutorial, Learn Android, HTML Tutorial, Coding , Java Tutorial, GTU Programs, Learning Programming

Sunday, 20 November 2016

Add Comment without reloading page using php

Author:  |   |  1 Comment | 

In this example, today we are learning about how to post comment without reloading page in php.

When you click on the button , then comment will be post without reloading the page and this comment will be added in div. We are also using materialize css file for designing.

If there are large amount of comment will be post then scrolling also available in the div.

Now, Let's see the example :


File name : demo.php


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE HTML>

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
 <meta name=viewport content="width=device-width, initial-scale=1">            
 <title>Ajax Comment Demo</title>

    <link rel="stylesheet" href="css/materialize.css" type="text/css">
    
    <script src="js/jquery.js"></script>
    <script src="js/materialize.min.js" type="text/javascript"></script>
 
 <script type="text/javascript">
  $( document ).ready(function(){
   $("#btn1").click(function(){
    var commentDivContent=$('#commentDiv').html();
    var newComment=$('#textarea1').val().replace(/\n/g, "<br />");
    
    $("#commentDiv").html("<div class='card col s11 input-field'>"+newComment+"</div>"+commentDivContent);
   });
  });
 </script>

</head>
<body>
 
 <nav class="nav-material blue">
  <div class="nav-wrapper">
     <a href="#" class="brand-logo center">Comment Without Refresh Demo</a>
  </div>
 </nav>
 
    <div class="container" style="margin-top:5px;">
  <div class="row">
   <div class="input-field col s11">
    <textarea id="textarea1" class="materialize-textarea"></textarea>
    <label for="textarea1">Add Comment</label>
   </div>
   <div class="input-field col s1">
    <input type="button" id="btn1" class="btn blue" value="Add Comment">
   </div>
  </div>
  <div class= "row" id="commentDiv" style="max-height: 200px;overflow-y: scroll;">
  </div>
 </div>
</body>
</html>


Output :

Ajax Comment Demo

 Download CSS & JS File : Click Here

, , , ,

  1 comment:

Like us on Facebook

Site Visitor

Powered by Blogger.