Saludos a todos...
Tengo el siguiente formulario el cual pretendo enlazar al documento email.php.
Código HTML:
<form id="form" name="form">
<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>
El mismo lo estoy validando con jquery validate
http://docs.jquery.com/Plugins/Validation
El problema está cuando en el método submitHandler intento procesar el formulario con jquery form (ajaxSubmit) tal como recomienda en la documentación de jquery validate.
Simplemente no logro el prósito de procesar el formulario e imprimir el resultado del proceso sin tener que refrescar la página.
Nota: Cuando desactivo el metodo submitHandler todo funciona bien sólo que obviamente el usuario se redirige hacia email.php, y el correo si se envía. Pero pues no es lo que quiero.
El código jquery es el siguiente:
Código:
// 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/>'}
},
submitHandler:function(form){
var opciones={
target: $("#formV").after(),
beforeSubmit: mostrarLoader, //funcion que se ejecuta antes de enviar el form
success: mostrarRespuesta,//funcion que se ejecuta una vez enviado el formulario
url: email.php,
type: post,
clearForm: true,
resetForm: true
};
$('#form').submit(function(){
$(this).ajaxSubmit(opciones);
return false;
});
function mostrarLoader(){
$("#formV").fadeIn("slow").after("<p>Procesando el formulario para su envio.</p>"); //muestro el loader de ajax
};
function mostrarRespuesta (responseText){
$("#sec4 form").fadeOut("slow");
$("#formV").fadeIn("slow");
$("#formV").after(responseText);
};
}
});
el documento email.php es como sigue:
Código PHP:
<?php
$nombre = $_REQUEST["nombre"];
$email = $_REQUEST["email"];
$destino = "[email protected]";
$asunto = "Mensaje de cliente";
$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";
//direcciones que recibirán copia
$headers .= "Cc: [email protected]\r\n";
mail($destino,$asunto,$cuerpo,$headers) or die("El email no se pudo enviar.");
if($_POST['mensaje'] != ''){
echo "Tu mensaje ha sido enviado con éxito. Prontamente responderemos al mismo.<br /><br />";
echo "Mensaje enviado por: ";
echo $_POST['nombre'];
echo "<br><br>";
echo "Correo de remitente: ";
echo $_POST['email'];
echo "<br><br>";
echo "Enviado a: ".$_POST['destino'];
echo "<br><br>";
echo "El mensaje dice: <br>";
echo $_POST['mensaje'];
}
?> Agradezco de ante mano la ayuda que me puedan ofrecer como también sus consejos.