Hi, I recently learned how to use AJAX, but I'm having a problem with it. What I'm trying to do is validate a form with PHP, and write the output of the validation in the same page. From the last question I have asked in bytes.com, I was introduced to AJAX(well, I always knew it, but I never used it). So, I wrote the following code accordingly:
index.html:
send.php:
main.js:
However, it is not working. From what I understand, after checking for flow in each of the files, there's a problem with my JS code. I may be wrong, but from what I tested it seems that it's a problem with the JS.
What's wrong?? I can't figure it out!
Thanks! :D
index.html:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Unimail </title> <script type="text/javascript" src="/scripts/main.js"></script> <link rel="shortcut icon" href="/images/favicon.ico" /> <link rel="stylesheet" type="text/css" href="/styles/main.css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta property="og:description" content="Free one-time use email" /> <meta property="og:title" content="Unimail email service" /> <meta name="author" content="Unimail" /> <meta property="og:site_name" content="Unimail" /> </head> <body> <div id="wrapper"> <div id="top"> <div class="header"> <img src="/images/email_logo4.jpg" alt="Unimail" /> </div> <div class="navig"> <ul class="navbar"> <li><a href="http://localhost/index.html"><span>Home</span></a></li> <li><a href="#">About us</a></li> <li><a href="#">FAQ</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Other services</a></li> </ul> </div> </div> <div id="body"> <br /> <p> Hello! Welcome to Unimail! With Unimail, you can send emails without registering. No inbox, no pre-chosen address, no name. One-time email! </p> <br /><br /> <form name="sendmail" action="/scripts/send.php" method="post" class="sender"> <p>Recipient's address </p> <input name="recipient" type="text" id="recipient" /><br /> <p> Title </p><input name="title" type="text" id="title" /> <p> Body </p><textarea rows="15" cols="65" name="body" id="body" ></textarea><br /> <input name="submit" type="submit" value="Send!" onclick="getObject();"/> <span id="error"> </span> </form> <p> Remember! You will not be able to receive any reply! </p> </div> <div id="footer"> <p> This site was created for occasional emailing. Please do not attempt to use this site to spam emails. </p> </div> </div> </body> </html>
Code:
<?php
require_once('class.phpgmailer.php');
$emailRep = "";
$titleRep = "";
$bodyRep = "";
function verifyEmail($email)
{
if (filter_var($email, FILTER_VALIDATE_EMAIL) == true)
{
return true;
}
$emailRep = "Error: Invalid email address!";
}
function verifyTitle($title)
{
if (strlen($title) > 0)
{
return true;
}
$titleRep = "Error: Empty titles are not allowed!";
}
function verifyBody($body)
{
if (strlen($body) > 19)
{
return true;
}
$bodyRep = "Error: Your email must consist of at least 20 character!";
}
$to = $_POST['recipient'];
$subject = $_POST['title'];
$message = $_POST['body'];
if (verifyEmail($to) && verifyTitle($subject) && verifyBody($message))
{
$mail = new PHPGMailer();
$mail->Username = 'unimail.auto@gmail.com';
$mail->Password = '***********';
$mail->From = 'unimail.auto@gmail.com';
$mail->FromName = 'Unimail';
$mail->Subject = $subject;
$mail->AddAddress($to);
$mail->Body = $message;
$mail->Send();
echo "Message sent!";
}
else
{
echo $emailRep . "<br />" . $titleRep . "<br />" . $bodyRep;
}
?>
Code:
function getObject()
{
var http;
try
{
http = new XMLHttpRequest();
}
catch(e)
{
try
{
http = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
http = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function getServer()
{
if (http.readyState == 4)
{
if (http.responseText.match("Error") == "Error")
{
document.getElementById("error").style.color = "red";
document.getElementById("error").innerHTML = " " + http.responseText;
}
else
{
document.getElementById("error").style.color = "green";
document.getElementById("error").innerHTML = " " + http.responseText;
}
}
}
var email = document.getElementById("recipient");
var title = document.getElementById("title");
var body = document.getElementById("body");
http.open("POST", "send.php", true);
http.onreadystatechange = getServer();
http.send(null);
}
What's wrong?? I can't figure it out!
Thanks! :D
Comment