Nuevamente saludos...
Ya logré resolver el problema.
La clave estaba en incluir en la función $.ajax el elemento data: "string" y no definir el elemento dataType. También en cambiar el type: GET por POST.
Otro cambio que realicé fue en la forma en que recojo los valores para imprimir un mensaje de confirmación en la pantalla. Estos valores no los obtengo de email.php, sino que los obtengo del jquery mismo con $("#nombre").val(), etc.
El ejemplo lo pueden ver en funcionamiento en esta página en construcción:
http://discotecamangobiche.com/
En fin para todos los que han tenido los mismas o similares dudas a las mías expresadas en este foro, dejo los códigos para que les pueda servir como guía.
Aclaro: Estoy seguro que este código y su función se pueden mejorar así que invito a los más expertos a que nos asesoren con este tipo de programas con el fin de que podamos mejorar :)
Formulario:
Código HTML:
<form id="form" name="form" action="email.php" method="post">
<label for="nombre">Nombre: </label>
<input id="nombre" name="nombre" placeholder="Escribe tu nombre" autofocus><br />
<label for="email">Email: </label>
<input type="email" id="email" name="email" placeholder="Escribe tu email"><br />
<label for="destino">Destino: </label>
<input type="email" id="destino" name="destino" placeholder="[email protected]" disabled><br />
<label for="mensaje">Mensaje: </label><br />
<textarea id="mensaje" name="mensaje" placeholder="Escribe tu mensaje" rows="10" cols="45"></textarea><br />
<input type="submit" id="enviar" name="enviar" value="Enviar">
<input type="reset" id="borrar" value="Borrar">
</form>
email.php
Código PHP:
<?php
$nombre = $_REQUEST["nombre"];
$email = $_REQUEST["email"];
$destino = "correo de destino";
$asunto = "Mensaje de cliente"; // Aquí puedo recoger un valor de formulario con $_REQUEST["asuto"] su fuera el caso.
$mensaje = $_REQUEST["mensaje"];
$cuerpo = "
<html>
<head>
<title>Correo de cliente</title>
</head>
<body>
<h1 style='
text-align: left;
font-family: verdana,arial;
font-size: 21px;
color: #f00;'>De: $nombre</h1>
<h1 style='
text-align: left;
font-family: verdana,arial;
font-size: 21px;
color: #f00;'>Para: quien corresponda...</h1>
<p id='parrafo' style='
text-align: justify;
color: #000;
font-family: verdana,arial;
font-size: 16px;
line-height: 30px;'>
$mensaje
</p>
</body>
</html>
";
//para el envío en formato HTML
$headers = "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/html; charset=utf-8\r\n";
//dirección del remitente
$headers .= "From: $nombre <$email>\r\n";
//dirección de respuesta, si queremos que sea distinta que la del remitente
/*$headers .= "Reply-To: algún correo \r\n";
//ruta del mensaje desde origen a destino
$headers .= "Return-path: [email protected]\r\n";*/
//direcciones que recibirán copia
$headers .= "Cc: algún correo \r\n";
/*//direcciones que recibirán copia oculta
$headers .= "Bcc: algún correo \r\n";*/
mail($destino,$asunto,$cuerpo,$headers) or die("El email no se pudo enviar.");
?> Javascript (jquery):
Código Javascript
:
Ver original// Para validar el formulario con jqueryValidate plugin
$('#form').validate({
rules:{
'nombre':{required: true, minlength: 3},
'email':{required: true, email: true},
'mensaje':{required: true, minlength: 15}
},
messages:{
'nombre':{required:'<br/>Debe ingresar el nombre<br/>', minlength: '<br/>Requiere mínimo 3 letras<br/>'},
'email':{required
: '<br/>Debe ingresar un correo electrónico<br/>',email
:'<br/>Debe ingresar el correo electrónico con el formato correcto. Por ejemplo: [email protected]<br/>'}, 'mensaje':{required:'<br/>Debe ingresar algún mensaje<br/>', minlength: '<br/>Requiere mínimo 15 letras<br/>'}
},
debug:true,
submitHandler:function(){
$.ajax({
url: "email.php",
type: "POST",
data: "nombre="+$('#nombre').val()+"&email="+$('#email').val()+"&destino="+$('#destino').val()+"&mensaje="+$('#mensaje').val(),
success: function(){
var confirmacion
= '<br/><br><p id="confirm">Tu mensaje ha sido enviado con éxito. Prontamente responderemos al mismo.<br /><br />Mensaje enviado por: '+$
("#nombre").
val()+'<br><br>Correo de remitente: '+$
("#email").
val()+'<br><br>Enviado a: [email protected]<br><br>El mensaje dice: <br>'+$
("#mensaje").
val()+'</p>'; $("#form").css("display","none");
$("#formV").fadeIn("slow").after(confirmacion);
$("#confirm").fadeIn("slow");
$("#confirm").css("font-size","12px");
$("#confirm").css("color","#f00");
},
error: function(){
$("#formV").fadeIn("slow").after("<br/><br><p id='confirm'>Su mensaje no ha podido ser enviado.</p>");
$("#confirm").fadeIn("slow");
$("#confirm").css("font-size","12px");
$("#confirm").css("color","#f00");
},
/*complete: function(){
$("#formV").fadeIn("slow").after("Su mensaje ha sido enviado.");
}*/
});
}
});
::: ahhhh y mega IMPORTANTE :::
Según el documento de jqueryForm nunca se debe usar en un mismo formulario ajaxForm y ajaxSubmit. Por yo no haber leido antes me estaba rompiendo la cabeza en vano. Pero bueno a veces pasa :)
Que tengan todos buen día !!!
