Help processing forms with PHP and AJAX
Posted: Wed Dec 15, 2010 7:42 am
Hi, I'm trying to process a form with AJAX and PHP, and after a lot of headache I managed to do it. Although, not exactly as I intended. I have a form that has four elements: Subject, recipient, body, and a send button. It's meant to send emails. What happens is that after the user clicks the send button, the elements' values are passed to AJAX, which sends it to a PHP file called send.php. Now, my problem is, that I want to be able to "interact" with the PHP file while it's still processing, since the process of sending an email takes about 3 seconds(I'm using PHPGMailer), and I know that some users have no patience and think that there's an error, refreshing the page and refilling the form. That may cause some problems, and I don't want that. I know because I did it a few times myself until I actually waited a few seconds for the PHP to finish processing. Also, if there are any errors, I only get to display one(using try..catch). That's why I want to interact with the PHP file - (1)When more than one of that input values are invalid, I want to display more than one error, which I can't seem to get to work(you will see why in my code shortly), and (2) if all inputs are valid, I want to display a text, you know, one of those "Sending..." messages with the rotating circle(I can't do this with my current code since I only display the PHP output after it finishes).
So how do I achieve this?
My code:
send.php
main.js
The HTML code is irrelevant.
Thanks!
So how do I achieve this?
My code:
send.php
Code: Select all
<?php
require_once('class.phpgmailer.php');
$regexrep = '/\s*/m';
$repl = '';
function verifyEmail($email)
{
preg_replace($regexrep, $repl, $email);
if (!(filter_var($email, FILTER_VALIDATE_EMAIL)))
{
throw new UnexpectedValueException("Invalid email address!");
}
return $email;
}
function verifyTitle($title)
{
if (strlen(trim($title)) == 0)
{
throw new LengthException("Empty titles are not allowed!");
}
return $title;
}
function verifyBody($body)
{
if (strlen(trim($body)) < 19)
{
throw new LengthException("Your message must consist of at least 20 characters!");
}
return $body;
}
try
{
$subject = verifyTitle($_POST['s']);
$body = verifyBody($_POST['b']);
$to = verifyEmail($_POST['e']);
$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 = $body;
$mail->Send();
echo "Message sent!";
}
catch (Exception $e)
{
echo $e->getMessage();
echo "<br />";
}
?>
Code: Select all
function getObject(f)
{
var http;
var url = "send.php";
var email = f.elements['recipient'].value;
var subject = f.elements['title'].value;
var body = f.elements['body'].value;
var parameters = "e=" + email + "&s=" + subject + "&b=" + body;
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("email") == "email" || http.responseText.match("Empty") == "Empty" || http.responseText.match("consist") == "consist")
{
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;
}
}
}
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", parameters.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = getServer;
http.send(parameters);
}
Thanks!