fecapeluda
Usuario (Italia)
Buenas espero todo anden bien, con todo el respeto que se merece la gente de taringa hago un repost que quisiera compartir de un material ya expuesto en la Comunidad de Diseño y Programacion Web. La gran ventaja de este script es que nos podemos colgar de Mootools si es que ya estamos trabajando con él y no andar agregando mas codigo inncesario, ademas que es simple y breve ideal para nuevos en el tema como yo. Notas importantes: - No hay problemas con las Ñ's ni acentos. - Puedes incorporar y modificar facilmente el metodo de validacion incluso con JS - No hay una funcion digna para validar el mail, por ahora. index.php (Nuestro archivo base contiene todo) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Enviemos un correo con JSON, Mootools y PHP</title> </head> <style type="text/css"><!-- Cargamos el CSS 1º tal como nos dice Firebug --> body{ /*Nuestro estilo super Duper*/ font-family:Arial, Helvetica, sans-serif; color:#333; } #hola{ font-family:Arial, Helvetica, sans-serif; color:#333; font-size:80%; margin:90px auto; width:420px; } .input { border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7; border-style:solid; border-width:1px; padding:5px; font-size:16px; color:#333; background:#fafafa; } .textarea { font-family:Arial, Tahoma, Helvetica, sans-serif; font-size:85%; padding:0.6em 0.5em 0.7em; border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7; border-style:solid; border-width:1px; background:#fafafa; width:320px; height:80px; } .boton{ border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7; border-style:solid; border-width:1px; padding:5px; font-size:16px; color:#333; background:#fafafa; } </style> <body> <div id="hola"><!-- Empieza content_hola que es quien contiene nuestro humilde formulario --> <div id="formulario"><div id="somethingiswrong" style="height:30px;"></div><!-- Si algo va mal somethingiswrong nos dira --> <form id="myForm"> Nombre<br /> <input id="nombre" type="text" class="input" /><br /> Correo<br /> <input id="mail" type="text" class="input"/><br /> Asunto<br /> <textarea id="texto" class="textarea"></textarea><br /> <br/> <input type="submit" id="bttn" class="boton" value="Enviar"> </form> </div> </div><!-- Termina content_hola --> <script type="text/javascript" src="mootools.js"></script> <script type="text/javascript"> window.addEvent('domready', function() { var myform = document.id('myForm'); var nombre = document.id('nombre'); var mail = document.id('mail'); var texto = document.id('texto'); var bttn = document.id('bttn'); myform.addEvent('submit',function(e) { //Obtenemos los valores e.stop(); var myData = { 'nombre':nombre.get('value').clean(), 'mail':mail.get('value').clean(), 'texto':texto.get('value').clean() }; var myReq = new Request.JSON({'url':'hereigo.php'}); //Una vez obtenidos llamamos nuestro archivo PHP que contiene lo necesario myReq.addEvent('request',function() { bttn.set('disabled',true).set('value',''); }); myReq.addEvent('success',function(feed,txt) { if (!feed) { document.getElementById("somethingiswrong".innerHTML = (txt); bttn.set('disabled',false).set('value','Reintentemos'); //Valor del texto en el boton despues de un mensaje de error return 0; } if (feed.status == 1) { document.getElementById("somethingiswrong".innerHTML = "Correo Enviado!. Muchas Gracias."; //Imprimimos un mensaje si todo sale bien } else { document.getElementById("somethingiswrong".innerHTML = "Que verguenza!. Ocurrio un error inesperado."; //Imprimimos un mensaje si algo falla } }); myReq.post(myData); }); }); </script> </body> </html> hereigo.php (Quien valida y envia) <?php // Por Angello Lopez A | TDP Workspace. Recuerda al mejorarlo compartirlo. $formName = trim($_POST['nombre']); // Usamos la funcion trim() para comprobar aunque puedes usar otras claro. $formMail = trim($_POST['mail']); $formText = trim($_POST['texto']); if(trim($formName) == "" { echo "Por favor ingrese algo como su nombre."; // Imprimimos el mensaje de error de acuerdo al campo. exit(); } if(trim($formMail) == "" { echo "Se nos hara un poco dificil contactarle."; exit(); } if(trim($formText) == "" { echo "Olvidando el tema?."; exit(); } $Headers = "From: $formMailrn"; // Asi usaremos la opciones responder $Headers .= "Content-type: text/html; charset=iso-8859-1n"; // or UTF-8 mas que nada codificamos para evitar problemas con las Ñ's y acentos//"; $emailTo = "tu correo [email protected]";// Recuerda reemplazar con tu correo $subject = "Ha llegado un nuevo mensaje!"; $Message = utf8_decode("$formName ($formMail)<br /><br />Dice:<br />$formText"; $ret = Array(); $ret['send'] = @mail($emailTo,$subject,$Message,$Headers); // Metemos en un arreglo todas las variables $ret['status'] = ($ret['send']) ? 1 : 0;// Si todo esta bien echo json_encode($ret); ?> En fin es bastante simple, viene con sus explicaciones de todas formas para que no solo sea algo de copiar, sino tambien de entender que es lo que haciamos. Suerte. PD: Bueno taringa me emotikonizo parte del codigo asi que les dejo el archivo completo aqui.