Tema Anterior: http://superahacker.blogspot.com/2009/09/ajax-asynchronous-javascript-y-xml.html
En el Tema anterior explicabamos el manejo de AJAX para el manejo asincrono de consultas con el servidor sin tener que recargar todo la página web, en esta oportunidad vamos a mostrar como validar un formulario de envio de E-Mail haciendo uso de AJAX y PHP.
Cree un archivo con el nombre de "index.html" y en el coloque el codigo a continuación.
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Simple AJAX Contact Form | Superahacker ©
</title>
<script type="text/javascript">
var http = false;
if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
}else {http = new XMLHttpRequest();}
function checkform(name, email, subject, content) {
http.abort();
http.open("GET", "contact.inc.php?name=" + name + "&email=" + email + "&subject=" + subject + "&content=" + content, true);
http.onreadystatechange=function(){if(http.readyState == 4){document.getElementById('ajaxresponse').innerHTML = http.responseText;} if(http.readyState == 1){document.getElementById('ajaxresponse').innerHTML ='<img src="loading.gif" />';}}
http.send(null);
}
</script>
<style type="text/css">
body, td {font-family: Lucida Grande, Lucida Sans Unicode, sans-serif;font-size: 12px;color: #444;}
input, textarea {background: #EEE;border: 1px solid #DDD;padding: 3px;color: #666;font-size: 12px;font-family: Lucida Grande, Lucida Sans Unicode, sans-serif;width: 200px;}
input.button {width: 100px;border: 1px solid #CCC;cursor: pointer;}
input:hover, textarea:hover {border: 1px solid #ECFF9F;background: #FEFEFE;}
input:focus, textarea:focus {border: 1px solid #C3DF53;background: #FEFEFE;}
div#ajaxresponse {margin-bottom: 10px;min-height: 15px;}
span#error {color: #CF5A5A;}
span#success {color: #6D8F1A;}
</style>
</head>
<body>
<h2>Simple AJAX Contact Form</h2>
<div id="ajaxresponse"></div>
<form action="" method="post">
<table>
<tr>
<td>Nombre</td><td><input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td>Email</td><td><input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td>Asunto</td><td><input type="text" name="subject" id="subject"/></td>
</tr>
<tr>
<td>Mensaje</td><td><textarea cols="" rows="" name="message" id="message"></textarea></td>
</tr>
<tr>
<td><input type="reset" value="Limpiar Form" class="button" /></td>
<td><input type="button" value="Enviar Mensaje" class="button" onClick="checkform(document.getElementById('name').value, document.getElementById('email').value, document.getElementById('subject').value, document.getElementById('message').value)" /></td>
</tr>
</table>
</form>
</body>
</html>
Luego para validar el envio de los datos lo haremos con un archivo php llamado "conctact.inc.php" y en coloque el codigo a continuación.
Nota: Por un error del Blog la funcion empty() de php se duplica en emptyempty() traten de copiar el codigo usando los controles [view plain].
<?php
/* RETARDO PARA PODER APRECIAR LA IMAGEN*/
sleep(1);
/* CONFIG */
$target = "superahacker@gmail.com";
$targetname = "Alex F. Torres Ch.";
$subjprefixe = true;
$subjprefix = "Simple AJAX Contact Form | Superahacker";
/* VARIABLES */
$name = $_GET['name'];
$email = $_GET['email'];
$subject = $_GET['subject'];
$content = $_GET['content'];
/* CHECKING DETAILS */
if(empty($name) && empty($email) && empty($subject) && empty($content)) {
echo '<span id="error">Por favor ingrese todos los datos.</span>';
}elseif(empty($name)) {
echo '<span id="error">Por favor ingrese su nombre</span>';
}elseif(empty($email)) {
echo '<span id="error">Por favor ingrese su email</span>';
}elseif(empty($subject)) {
echo '<span id="error">Por favor ingrese su asunto</span>';}
elseif(empty($content)) {
echo '<span id="error">Por favor ingrese su mensaje</span>';}
elseif(!preg_match( "/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/", $email)) {
echo '<span id="error">Por favor ingrese un email valido.</span>';
}elseif(strlen($name) < 3) {
echo '<span id="error">tu nombre debe ser mayor a 3 caracteres.</span>';}
elseif(strlen($email) < 9) {
echo '<span id="error">tu email debe ser mayor a 9 carcateres.</span>';
}elseif(strlen($subject) < 3) {
echo '<span id="error">tu asunto debe ser mayor a 3 caracteres.</span>';
}elseif(strlen($content) < 20) {
echo '<span id="error">tu mensaje debe ser mayor de 20 caracteres.</span>';}
else {
/* EMAIL */
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'To: ' . $name . ' <' . $email . '>' . "\r\n";
$headers .= 'From: ' . $targetname . ' <' . $target . '>' . "\r\n";
$headers .= 'Reply-To: ' . $targetname . ' <' . $target . '>' . "\r\n";
if($subjprefixe == true) {
$subject = $subjprefix . " " . $subject;}
$message = '<html><head><title>' . $subject . '</title><br /><style type="text/css"><br />body, td <br />{font-family: Lucida Grande, Lucida Sans Unicode, sans-serif;font-size: 12px;color: #444;background: #EEE;}<br /></style><br /></head><body><p><br /><b>Sender:</b> ' . $name . ' <' . $email . '><br /><b>Asunto:</b> ' . $subject . '<br /><b>Mensaje:</b>' . nl2br($content) . '</p><br /><p>--Mensaje enviado el ' . date("d/m/Y H:i:s") . '</p></body></html>';
if(mail($email, $subject, $message, $headers)) {
echo '<span id="success">Mensaje Enviado</span>';
}else {echo '<span id="error">Ocurrio un error mientras se enviaba el email.</span>';}
}
?>
y por ultimo agregar esta imagen llamada "loading.gif" para la animación de el proceso mientras se intenta recoger datos del servidor.
Para ver el ejemplo ingrese a esta dirección http://superahacker.webcindario.com/ajax003/index.html
Nota: se hace uso de la función mail() de php recuerde que esta función requiere de un servicio de correo para llevar acabo el envio.
Si cuenta con un servidor de correo interno en su red podria cambiar el parametro SMTP del php.ini para indicar el IP del servidor de correo el cual usaremos para los envios de E-Mail.
Si cuenta con servidor de correo externo lo mas probable es que requiera autenticación para ello esta función carece de parametros de autenticación.
El mensaje no llega con el formato HTML a mi bandeja de correo, en gmail ):
ResponderBorrarEstimado Topiz puedo asegurar que el mensaje llega a Gmail en Formato HTML, Ahora si tu bandeja de correo no muestra formateado los textos deberías revisar en su configuración.
Borrar