JSFiddle - React, Tailwind, and code Playground

by panchroma

HTML

<form onsubmit="enviarMail(); return false" name="enviar_email" action="">
<p>E-mail de tu amigo</p>
<p>
<input size="30" type="text" name="email_destino" />
</p>
<p>Tu nombre </p>
<p>
<input size="30" type="text" name="emisor" />
</p>
<p>Mensaje a enviar</p>
<p>
<textarea name="mensaje" cols="45%" rows="2" ></textarea>
</p>
<p>
<input type="submit" value="Enviar" />
</p>
</form>
<div id="resultado_mensaje" style="width:300px; height:30px; border:1px solid gray;">Resultado aqui.</div>    

<?php
	$emisor=$_POST['emisor'];
	$destinatario=$_POST['destinatario'];
	$mensaje=$_POST['mensaje'];
	//Estoy recibiendo el formulario, compongo el cuerpo
	$cuerpo = "<h1>Un mensaje para ti</h1>";
	$cuerpo .= "<p>Tu amigo " . $emisor . ", te envia este mensaje.</p>";
	$cuerpo .= "<p>Tu email: " . $destinatario . "</p>";
	$cuerpo = $cuerpo.$mensaje;
	//mando el correo...
	mail($destinatario,"Mensaje de un amigo",$cuerpo,"MIME-Version: 1.0\nContent-type: text/html; charset=UTF-8\nFrom: ".$emisor." < http://www.miweb.com >");
	//doy las gracias por el envio
	echo "<div style=\"background-color:green;color:white;padding:4px;text-align:center;\">Gracias por rellenar el formulario. Se ha enviado correctamente. Enviale a otros contactos</div>";
?>

JavaScript

function nuevoAjax(){
	var xmlhttp=false;
	try{
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	}catch(e){
		try {
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}catch(E){
			xmlhttp = false;
		}
	}	
	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}
function enviarMail(){
       c = document.getElementById('resultado_mensaje');
   
       //variable=documenet.nombre_del_form.nombre_del_control.value
       emis=document.enviar_email.emisor.value;
       dest=document.enviar_email.email_destino.value;
       men=document.enviar_email.mensaje.value;
   
       ajax=nuevoAjax();
       c.innerHTML = '<p style="text-align:center;"><img src="esperando.gif"/></p>'; 
       ajax.open("POST", "envia_mail.php",true);
       ajax.onreadystatechange=function() {
       if (ajax.readyState==4) {
       c.innerHTML = ajax.responseText
       }
       borrarCampos()
       }
       ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
       ajax.send("destinatario="+dest+"&emisor="+emis+"&mensaje="+men)
}
function borrarCampos(){
       document.enviar_email.emisor.value="";
       document.enviar_email.email_destino.value="";
       document.enviar_email.mensaje.value="";
       document.enviar_email.email_destino.focus();
}