Sign In
Create Account
Follow Us on Twitter
Subscribe on Youtube
Everything works except for the part that's supposed to add a message to the guestbook.
The problem isn't the PHP code for adding a message but the AJAX...
Instead of adding a post and doing it in the background it keeps going to the addmessage.php page... and because it's supposed to be AJAX there shouldn't be a page reload...
If anyone can help me solve this problem and give me some tips on what to add to the guestbook like security or other stuff I forgot...
My code is:
addmessage.php
<?php
require_once("config.php");
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$query = "INSERT INTO posts (name, email, message) VALUES ('$name','$email', '$message')";
$result = mysqli_query($conn, $query) or diet("Error executing insert query.");
if($result){
echo "Message added";
}
?>
showmessages.php
<?php
require_once("config.php");
$query = "SELECT * FROM posts ORDER BY id DESC";
$result = mysqli_query($conn, $query) or die("Error executing read query.");
while($row = mysqli_fetch_object($result)){
if(mysqli_num_rows($result)>0){
$name = $row->name;
echo $name . "<br />";
}else{
echo "No messages in the guestbook yet...";
}
}
?>
Index.php
<html>
<head>
<title>Guestbook V1.1</title>
<script type="text/javascript">
// Used in showMessages NOT IN getXmlHttpObject()!!!
var xmlHttp;
function showMessages(){
xmlHttp = getXmlHttpObject();
if(xmlHttp == null){
alert("Your browser does not support Javascript");
return;
}
var url = "showmessages.php";
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function postMessage(){
xmlHttp = getXmlHttpObject();
if(xmlHttp == null){
alert("Your browser does not support Javascript");
return;
}
var name = document.postform.name.value;
var email = document.postform.email.value;
var message = document.postform.message.value;
var url = "addmessage.php?name="+name+"&email="+email+"&message="+message;
xmlHttp.onreadystatechange=statechanged;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function stateChanged(){
if(xmlHttp.readyState == 4){
document.getElementById("messages").innerHTML=xmlHttp.responseText
}
if(xmlHttp.readyState == 3){
document.getElementById("messages").innerHTML="Loading3...";
}
if(xmlHttp.readyState == 2){
document.getElementById("messages").innerHTML="Loading2...";
}
if(xmlHttp.readyState == 1){
document.getElementById("messages").innerHTML="Loading1...";
}
if(xmlHttp.readyState == 0){
document.getElementById("messages").innerHTML="Loading0...";
}
}
function getXmlHttpObject(){
var xmlHttp = null;
try{
//Firefox, opera, safari,...
xmlHttp = new XMLHttpRequest();
}catch(e){
try{
//IE
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
//IE other
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
</script>
</head>
<body>
<h3>Guestbook V1.1</h3>
<div id="messages">
<script type="text/javascript">
showMessages();
</script>
</div>
<h3>Post a message</h3>
<div id="postform">
</div><form name="postform" id="postform" method="post" action="addmessage.php">
Name:*<br />
<input type="text" name="name" id="name" /><br />
Email:*<br />
<input type="text" name="email" id="email" /><br />
Message:*<br />
<textarea cols="60" rows="6" name="message" id="message"></textarea><br />
<input type="reset" value="Reset" />
<input type="submit" value="Post message" onclick="postMessage()" />
</form>
</div>
</body>
</html>
Back to top
