Comments Box แสดงความคิดเห็นแบบไม่ต้องรีเฟรชเพจ jQuery, PHP, HTML ~ Bookneo

เมื่อหลายวันก่อนมีสมาชิก ท่านหนึ่ง.. ถามผมว่ามีคอมเม้นแบบไม่ต้อง Refresh หรือเปล่า ผมตอบว่าไม่มีแต่ก็ได้ สัญญาไว้ว่าจะมาเขียนให้ได้อ่านกัน วันนี้ก็เลยเขียนบทความคั่นรายการ Listbox ด้วย Comments box สักบทความก็แล้วกัน...

บทความนี้มีไฟล์ 3 ไฟล์ ดังนี้
jquery.js
newcomment.php
commentajax.php

ผมจะเริ่มด้วยการเขียน form ก่อน
ไฟล์ newcomment.php

<div class="main">
<div class="formcomment">
  
<form action="#" method="post">
<input name="title" id="name" type="text">
Name<span class="star">*</span>
<input name="email" id="email" type="text">
Email<span class="star">*</span><br>
<br>
<textarea name="comment" id="comment"></textarea><br>
<input class="submit" value="Submit" type="submit">
</form>
  
</div>
</div>

จากนั้นผมก็สร้าง div สำหรับโชว์คอมเม้น อยู่ภายในคลาสเมน

<div id="showcomment"></div>

ตรงนี้ท่านก็เขียนโค้ดเพื่อดึงข้อมูลคอมเม้นที่บันทึกแล้วขึ้นมาแสดงก่อนอยู่ภายในไอดีโชว์คอมเม้น
ตรงนี้ผมแค่แสดงตัวอย่างให้ท่านดูเท่านั้น

<table><tbody><tr><td valign="top">
<img src="http://www.bookneo.com/images_user/admin.png" style="float:left;
 width:60px; margin-right:20px">
</td><td>
<div style="border:2px dashed #dddddd;padding:5px;width:300px;">
<span style="font-size:16px; color:#663399; font-weight:bold"></span>
<span>
<?php echo "<font color='#1BAFD5'--><b>admin</b>";//$name ?>
</span> <br><br>
<?php echo " ตรงนี้ท่านก็เขียนโค้ดเพื่อดึงข้อมูลคอมเม้นที่บันทึกแล้วขึ้นมาแสดงก่อน";//$comment ?>
</div>
</td></tr></tbody></table>

แล้วผมก็สร้าง แท็ก ol ขึ้นมาเพื่ออัพเดทคอมเม้นที่มาใหม่พร้อมกับ แท็ก li จากไฟล์ commentajax.php

<ol id="update" class="showcomment"></ol>

แล้วผมก็ใส่ CSS ให้กับไฟล์ newcomment.php

.main{
    margin-left:250px;
    }
  
    .submit{
    margin-left:330px;
    background: #2B417D;
    font-weight: bold;
    color:white;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    padding: 3px 3px 3px 3px;
    }
    textarea
    {
    color:#000000;
    font-size:14px;
    border:#1BAFD5 solid 2px;
    height:124px;
    margin-bottom:10px;
    width:400px;
    height:80px;
    }
    .star
    {
    color:#FF0000;
    font-size:16px;
    font-weight:bold;
    padding-left:5px;
    }
    #email{
  
    }
    .cleaner_h5{
    height:5px;
    }
    #update{
    border:0px solid #dddddd;
    width:398px;
    padding:10px;
    word-wrap:break-word;
    overflow: hidden;
    }
    ol.showcomment{
     list-style:none;
     font-size:1.2em;
     margin-left: -10px;
    }
    ol.showcomment li{
    display:none;
    position:relative;
    padding:.7em 0 .6em 0;
    }
    ol.oldcomment{
    list-style:none;
    font-size:1.2em;
    margin-left: 0px;
    }
    ol.oldcomment li{
    position:relative;
    padding:.7em 0 .6em 0;
    }

จากนั้นก็มาถึงคิวของ jQuery ที่เราจะส่งข้อมูลแบบไม่ต้อง refresh กัน

$(function() {
  
$(".submit").click(function() {
  
var name = $("#name").val();
var email = $("#email").val();
var comment = $("#comment").val();
var dataString = 'name='+ name + '&email=' + email + '&comment=' + comment;
//alert(dataString);
if(name=='' || email=='' || comment=='')
{
alert('กรุณากรอกข้อมูลให้ครบด้วยนะกรึ๊บ!');
}
else
{
  
$.ajax({
type: "POST",
url: "commentajax.php",
data: dataString,
cache: false,
success: function(data){
$("ol#update").append(data);
$("ol#update li:last").fadeIn("slow"); //นำข้อมูลมาแสดงด้วยการต่อท้าย li ตัวล่าสุด
document.getElementById('email').value='';//สั่งให้ form ทั้งหมดว่างเปล่า
document.getElementById('name').value='';
document.getElementById('comment').value='';
}
});
}
return false;
});
});

ไปที่ไฟล์ commentajax.php
รับข้อมูลเพื่อเก็บลงฐานข้อมูล

if($_POST)
{
$name=$_POST['name'];
$email=$_POST['email'];
$comment=$_POST['comment'];
  
//เขียนโค้ดบันทึกลงฐานข้อมูลตรงนี้ครับ
  
}
  
else { }

จากนั้นก็นำข้อมูลที่รับมานำมาแสดงเพื่อ return ค่าส่งกลับไปให้กับ javascript นำไปแสดง

<li class="box" valign="top">
<table><tbody><tr><td valign="top">
<img src="http://www.bookneo.com/images/default_avatar.gif" style="float:left;
 width:60px; margin-right:20px">
</td><td>
<div style="border:2px dashed #dddddd;padding:5px;width:300px;">
<span style="font-size:16px; color:#3859BB; font-weight:bold">
<?php echo $name;?></span> <br><br>
<?php echo $comment; ?>
  
</div>
</td></tr></tbody></table>
</li>

โค้ดที่เสร็จแล้ว
ไฟล์ newcomment.php

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
  
$(".submit").click(function() {
  
var name = $("#name").val();
var email = $("#email").val();
var comment = $("#comment").val();
var dataString = 'name='+ name + '&email=' + email + '&comment=' + comment;
//alert(dataString);
if(name=='' || email=='' || comment=='')
{
alert('กรุณากรอกข้อมูลให้ครบด้วยนะกรึ๊บ!');
}
else
{
  
$.ajax({
type: "POST",
url: "commentajax.php",
data: dataString,
cache: false,
  
success: function(data){
$("ol#update").append(data);
$("ol#update li:last").fadeIn("slow");
document.getElementById('email').value='';
document.getElementById('name').value='';
document.getElementById('comment').value='';
}
});
}
return false;
});
});
  
</script>
    <style type="text/css">
    .main{
    margin-left:250px;
    }
  
    .submit{
    margin-left:330px;
    background: #2B417D;
    font-weight: bold;
    color:white;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    padding: 3px 3px 3px 3px;
    }
    textarea
    {
    color:#000000;
    font-size:14px;
    border:#1BAFD5 solid 2px;
    height:124px;
    margin-bottom:10px;
    width:400px;
    height:80px;
    }
    .star
    {
    color:#FF0000;
    font-size:16px;
    font-weight:bold;
    padding-left:5px;
    }
    #email{
    
    }
    .cleaner_h5{
    height:5px;
    }
    #update{
    border:0px solid #dddddd;
    width:398px;
    padding:10px;
    word-wrap:break-word;
    overflow: hidden;
    }
    ol.showcomment{
     list-style:none;
     font-size:1.2em;
     margin-left: -10px;
    }
    ol.showcomment li{
    display:none;
    position:relative;
    padding:.7em 0 .6em 0;
    }
    ol.oldcomment{
    list-style:none;
    font-size:1.2em;
    margin-left: 0px;
    }
    ol.oldcomment li{
    position:relative;
    padding:.7em 0 .6em 0;
    }
  
    </style>
      
      
      
  
<div class="main">
  
<div id="showcomment">
  
  
<table><tbody><tr><td valign="top">
<img src="http://www.bookneo.com/images_user/admin.png" style="float:left;
 width:60px; margin-right:20px">
</td><td>
<div style="border:2px dashed #dddddd;padding:5px;width:300px;">
<span style="font-size:16px; color:#663399; font-weight:bold"></span>
<span>
<?php echo "<font color='#1BAFD5'><b>admin</b>";//$name ?>
</span> <br><br>
<?php echo " ตรงนี้ท่านก็เขียนโค้ดเพื่อดึงข้อมูลคอมเม้นที่บันทึกแล้วขึ้นมาแสดงก่อน";//$comment ?>
</div>
</td></tr></tbody></table>
  
  
<div style="margin-top:-20px;"></div>
  
<ol id="update" class="showcomment"></ol>
</div>
  
<div class="formcomment">
<div id="loading"></div>
<form action="#" method="post">
  
<input name="title" id="name" type="text">
Name<span class="star">*</span>
<input name="email" id="email" type="text">
Email<span class="star">*</span><br>
<br>
<textarea name="comment" id="comment"></textarea><br>
<input class="submit" value="Submit" type="submit">
  
</form>
  
</div>
</div>

ไฟล์ commentajax.php

<?php

if($_POST)
{
$name=$_POST['name'];
$email=$_POST['email'];
$comment=$_POST['comment'];
    
//เขียนโค้ดบันทึกลงฐานข้อมูลตรงนี้ครับ
  
}
  
else { }
  
?>
<li class="box" valign="top">
<table><tbody><tr><td valign="top">
<img src="http://www.bookneo.com/images/default_avatar.gif" style="float:left;
 width:60px; margin-right:20px">
</td><td>
<div style="border:2px dashed #dddddd;padding:5px;width:300px;">
<span style="font-size:16px; color:#3859BB; font-weight:bold">
<?php echo $name;?></span> <br><br>
<?php echo $comment;?>
  
</div>
</td></tr></tbody></table>
</li>

บทความนี้ก็จบลงเพียงเท่านี้ครับ ผิดพลาดยังไง ขออภัยด้วยครับ