I have created a page index.php where the user clicks "Reply", adds text in the resulting comment box ("So what's on your mind") and clicks "Comment". This text is posted to the box below. The issue I'm experiencing is that if the "Reply" button is clicked multiple times, when text is entered in the comment box and "Comment" is clicked, the text is entered into the box below (and the database) a corresponding number of times. I can't see a way around this. Please see the code below - there is a generic connect.php file which i won't bother adding. Thanks in advance.
index.php
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<link rel="stylesheet" type="text/css" href="css.css">
<head>
<title>Comment</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".loader").load('index2.php');
$(document).on('click', '.clicker', function(){
var name = ($('.clicker').attr('id'));
$('#1').show();
$('.mydiv1').val("So what's on your mind?");
$('.mydiv1').focus(function(){
$(this).filter(function(){
return $(this).val() == "" || $(this).val() == "So what's on your mind?"
}).val("").css("color","#000000");
});
$('.mydiv1').blur(function(){
$(this).filter(function(){
return $(this).val() == ""
}).val("So what's on your mind?").css("color","#808080");
});
$('.comment3').click(function(){
var status=$('.mydiv1').val();
//alert(status);
var DATA = 'status=' + status;
$.ajax({
type: "POST",
url: "update.php",
data: DATA,
cache: false,
success: function(DATA){
$('.mydiv6').prepend(DATA);
$('.mydiv1').val("So what's on your
mind?").css("color","#808080").css("height","30px");
}
});
});
});
});
</script>
</head>
<body>
<div class="loader"></div>
</body>
</html>
index2.php
<?php
echo "<div class='master'>";
echo "<div class='comment' id=1>";
echo "<textarea class='mydiv1'></textarea>";
echo "<button class='comment3'>Comment</button>";
echo "</div>";
echo "<div class='comment2' id=2>";
echo "<textarea class='mydiv6'></textarea>";
echo "<button class='comment'>Comment</button>";
echo "</div>";
echo "<div class='mydiv2'>DIV 2</div>";
echo "<div class='mydiv3'>DIV 3</div>";
echo "<div class='mydiv4'>DIV 4</div>";
echo "<div class='mydiv5'>DIV 5</div>";
echo "<button class='clicker' id='1'>Reply</button>";
echo "</div>";
?>
update.php
<?PHP
include('connect.php');
$status=$_POST['status'];
$status = stripslashes($status);
$status = strip_tags($status);
$insert_status = mysql_query('INSERT INTO `test` (`id`, `status`) VALUES ("",
'.$status.'");');
$me = mysql_query("SELECT * FROM test");
while($row=mysql_fetch_array($me)){
$status=$row['status'];
}
$status = wordwrap($status, 80, "\n", true);
$status=nl2br($status);
echo "$status\n";
?>
css.css:
comment{
display: none;
}
.clear{
clear:both;
}