I'm trying to do a comment form, that puts the comment in my mysql database, and puts the new comment on my page right after submitting (and clears the form). But somehow you have to always refresh to see the new comments and if you click on submit more than once it shows duplicated comments after refresh. How can I solve that problem? I'm kinda a noob, so my codes are mostly from tutorials that I don't fully understand yet...
my php-page:
<?php
// Error reporting:
error_reporting(E_ALL^E_NOTICE);
include "connect.php";
include "comment.class.php";
$comments = array();
$result = mysql_query("SELECT * FROM comments ORDER BY id ASC");
while($row = mysql_fetch_assoc($result))
{
$comments[] = new Comment($row);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Bausatz</title>
<meta name="" content="">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/modernizr-2.7.1.min.js"></script>
<style type="text/css"></style>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400' rel='stylesheet'
type='text/css'>
</head>
<body>
<header>
<div class="logo">
<span class="col">ON THE </span>W<span class="col">OODWAY</span>
</div>
<nav>
<a href="travels.html">TRAVELS</a>
<a href="blog.html">BLOG</a>
<a href="me.html">ME</a>
</nav>
</header>
<div class="main">
<div class="contentwrapper">
<div class="entry">
</div>
<div class="comment">
<div id="each">
<?php
foreach($comments as $c){
echo $c->markup();
}
?>
</div>
<div id="addCommentContainer">
<p>Add a Comment</p>
<form id="addCommentForm" method="post" action="">
<div>
<label for="name">Your Name</label>
<input type="text" name="name" id="name" />
<label for="email">Your Email</label>
<input type="text" name="email" id="email" />
<label for="body">Comment Body</label>
<textarea name="body" id="body" cols="20" rows="5"></textarea>
<input type="submit" id="submit" value="Submit" >
</div>
</form>
</div>
</div>
</div>
</div>
<div class="unten">
<nav>
<a href="#">contact</a>
<a href="#">copyright</a>
</nav>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js">
<\/script>')</script>
<script type="text/javascript" src="js/comment.js"></script>
</body>
</html>
jQuery:
$(document).ready(function(){
var working = false;
$('#addCommentForm').submit(function(e){
e.preventDefault();
if(working) return false;
working = true;
$('#submit').val('Working..');
$('span.error').remove();
/* Sending the form fileds to submit.php: */
$.post('submit.php',$(this).serialize(),function(msg){
working = false;
$('#submit').val('Submit');
if(msg.status){
$(msg.html).hide().insertBefore('#addCommentContainer').slideDown();
$('#body').val('');
}
else {
$.each(msg.errors,function(k,v){
$('label[for='+k+']').append('<span class="error">'+v+'</span>');
});
}
},'json');
});
});
comment.class.php
<?php
class Comment
{
private $data = array();
public function __construct($row)
{
/*
/ The constructor
*/
$this->data = $row;
}
public function markup()
{
/*
/ This method outputs the XHTML markup of the comment
*/
// Setting up an alias, so we don't have to write $this->data every time:
$d = &$this->data;
$link_open = '';
$link_close = '';
// Converting the time to a UNIX timestamp:
$d['dt'] = strtotime($d['dt']);
return '
<div class="comment">
<div class="name">'.$link_open.$d['name'].$link_close.'</div>
<div class="date" title="Added at '.date('H:i \o
d M
Y',$d['dt']).'">'.date('d M Y',$d['dt']).'</div>
<p>'.$d['body'].'</p>
</div>
';
}
public static function validate(&$arr)
{
/*
/ This method is used to validate the data sent via AJAX.
/
/ It return true/false depending on whether the data is valid, and populates
/ the $arr array passed as a paremter (notice the ampersand above) with
/ either the valid input data, or the error messages.
*/
$errors = array();
$data = array();
// Using the filter_input function introduced in PHP 5.2.0
if(!($data['email'] = filter_input(INPUT_POST,'email',FILTER_VALIDATE_EMAIL)))
{
$email = '';
}
// Using the filter with a custom callback function:
if(!($data['body'] =
filter_input(INPUT_POST,'body',FILTER_CALLBACK,array('options'=>'Comment::validate_text'))) )
{
$errors['body'] = 'Please enter a comment body.';
}
if(!($data['name'] = filter_input(INPUT_POST,'name',FILTER_CALLBACK,array('options'=>'Comment::validate_text'))))
{
$errors['name'] = 'Please enter a name.';
}
if(!empty($errors)){
// If there are errors, copy the $errors array to $arr:
$arr = $errors;
return false;
}
foreach($data as $k=>$v){
$arr[$k] = mysql_real_escape_string($v);
}
$arr['email'] = strtolower(trim($arr['email']));
return true;
}
private static function validate_text($str)
{
if(mb_strlen($str,'utf8')<1)
return false;
$str = nl2br(htmlspecialchars($str));
$str = str_replace(array(chr(10),chr(13)),'',$str);
return $str;
}
}
?>
submit.php
<?php
error_reporting(E_ALL^E_NOTICE);
include "connect.php";
include "comment.class.php";
$arr = array();
$validates = Comment::validate($arr);
if($validates)
{
mysql_query(" INSERT INTO comments(name,url,email,body)
VALUES (
'".$arr['name']."',
'".$arr['url']."',
'".$arr['email']."',
'".$arr['body']."'
)");
$arr['dt'] = date('r',time());
$arr['id'] = mysql_insert_id();
$arr = array_map('stripslashes',$arr);
$insertedComment = new Comment($arr);
echo json_encode(array('status'=>1,'html'=>$insertedComment->markup()));
}
else
{
echo '{"status":0,"errors":'.json_encode($arr).'}';
}
?>
connect.php
<?php
$db_host = '*****';
$db_user = '*****';
$db_pass = '*****';
$db_database = '*****';
$link = @mysql_connect($db_host,$db_user,$db_pass) or die('Unable to establish a DB connection');
mysql_query("SET NAMES 'utf8'");
mysql_select_db($db_database,$link);
?>
