Help processing forms with PHP and AJAX

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
haldaemon
Forum Newbie
Posts: 1
Joined: Wed Dec 15, 2010 7:27 am

Help processing forms with PHP and AJAX

Post by haldaemon »

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

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 />";
}

?>
main.js

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);
}
The HTML code is irrelevant.




Thanks! :D
Post Reply