Problema al mandar mail con Ajax.

alvarols · #1 (**permalink**) 29/03/2010, 19:07

Tengo un problema y es que hay un error con el Ajax que estoy utilizando, segun yo está todo bien pero no se que pueda ser. Ojalá me puedan ayudar.

CONTACTO. PHP

Código:

<?php include 'header.php' ?>
<div id="bajocabezal"></div>
<div id="base">
	<div id="baseizq">
    	<h1>Contáctanos</h1>
        <div id="separador"></div>
        <h2>Ventas</h2>
        
        <p><i>*Los campos marcados con asterisco son obligatorios</i></p>
        			<div id="response"></div>
        <form name="contacto" method="post" action="" >
            	<table width="100%" border="0" align="left">
                	<tr>
                    	<td width="40%"><p>Nombre*</p></td>
                        <td width="60%" colspan="1"><input name="nombre" type="text" value="" size="40" class="inputcolor" /></td>
                    </tr>
                    <tr>
                    	<td width="40%"><p>Empresa</p></td>
                        <td width="60%" colspan="1"><input name="empresa" type="text" value="" size="40" class="inputcolor" /></td>
                    </tr>
                    <tr>
                    	<td width="40%"><p>Teléfono</p></td>
                        <td width="60%" colspan="1"><input name="telefono" type="text" value="Incluir Lada" size="40" class="inputcolor" /></td>
                    </tr>
                    <tr>
                    	<td width="40%"><p>Correo Electrónico*</p></td>
                        <td width="60%" colspan="1"><input name="email" type="text" value="" size="40" class="inputcolor" /></td>
                    </tr>
                    <tr>
                    	<td width="40%"><p>Ciudad*</p></td>
                        <td width="60%" colspan="1"><input name="ciudad" type="text" value="" size="40" class="inputcolor" /></td>
                    </tr>
                    <tr>
                    	<td width="40%"><p>Estado*</p></td>
                        <td width="60%" colspan="1"><select name="estado" id="estado"/>
                        							<option value="Aguascalientes">Aguascalientes
                                                    <option value="Baja California Norte">Baja California Norte
                                                    <option value="Baja California Sur">Baja California Sur
                                                    <option value="Campeche">Campeche
                                                    <option value="Chiapas">Chiapas
                                                    <option value="Chihuahua">Chihuahua
                                                    <option value="Coahuila">Coahuila
                                                    <option value="Colima">Colima
                                                    <option value="Distrito Federal">Distrito Federal
                                                    <option value="Durango">Durango
                                                    <option value="Guanajuato">Guanajuato
                                                    <option value="Guerrero">Guerrero
                                                    <option value="Hidalgo">Hidalgo
                                                    <option value="Jalisco" selected="selected">Jalisco
                                                    <option value="Estado de México">Estado de México
                                                    <option value="Michoacan">Michoacan
                                                    <option value="Morelos">Morelos
                                                    <option value="Nayarit">Nayarit
                                                    <option value="Nuevo Leon">Nuevo Leon
                                                    <option value="Oaxaca">Oaxaca
                                                    <option value="Puebla">Puebla
                                                    <option value="Querétaro">Querétaro
                                                    <option value="Quintana Roo">Quintana Roo
                                                    <option value="San Luis Potosí">San Luis Potosí
                                                    <option value="Sinaloa">Sinaloa
                                                    <option value="Sonora">Sonora
                                                    <option value="Tabasco">Tabasco
                                                    <option value="Tamaulipas">Tamaulipas
                                                    <option value="Tlaxcala">Tlaxcala
                                                    <option value="Veracruz">Veracruz
                                                    <option value="Yucatán">Yucatán
                                                    <option value="Zacatecas">Zacatecas
                                                    </select></td>
                    </tr>
                    <tr>
                    	<td width="40%"><p>Area a la que se desea contactar*</p></td>
                        <td width="60%" colspan="1"><select name="area" id="area"/>
                        							<option value="Ventas">Ventas
                                                    <option value="Compras">Compras
                                                    <option value="Dirección">Dirección
                                                    <option value="Franquicias">Franquicias
                                                    <option value="Contacto">Contacto
                                                    </select></td>
                    </tr>
                     <tr>
                         <td width="14%"><p>Comentarios*</p></td>
						 <td colspan="2"><textarea name="comentarios" rows="5" cols="40"  class="inputcolor3" style="font-family: Arial, Verdana, sans-serif; font-size:14px;">...Tus comentarios aqu&iacute;...</textarea>
                         </td>
                    </tr>
                    <tr>
						 <td height="71" colspan="3"><br /><input type="image" image src="Imagenes/boton.png" name="enviar" value= "enviar" id= "enviar" class="inputcolor2" />
                    </td>
                    </tr>
                </table>
            </form>
            
            
    </div><!--baseizq-->
</div><!--base-->
<?php include 'footer.php' ?>

AJAX.JS

Código:

 $(document).ready(function(){
	$("#enviar").click(function(){
		var valid = '';
		var isr = ' Requerido.';
		var nombre = $("#name").val();
		var empresa = $("#empresa").val();
		var telefono = $("#subject").val();
		var email = $("#email").val();
		var ciudad = $("#ciudad").val();
		var estado = $("#estado").val();
		var comentarios = $("#comentarios").val();
		if (nombre.length<1) {
			valid += '<br />Un nombre válido'+isr;
		}
		if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
			valid += '<br />Un e-mail válido'+isr;
		}
		if (telefono.length<1) {
			valid += '<br />Teléfono válido'+isr;
		}
	    if (ciudad.length<1) {
			valid += '<br />Nombre de ciudad'+isr;
		}
		if (text.length<1) {
			valid += '<br />Campo de texto'+isr;
		}
		if (valid!='') {
			$("#response").fadeIn("slow");
			$("#response").html("Error:"+valid);
		}
		else {
			var datastr ='nombre=' + nombre + '&empresa=' + empresa + '&telefono=' + telefono + '&email=' + email + '&ciudad=' + ciudad + '&estado=' + estado + '&comentarios=' + comentarios;
			$("#response").css("display", "block");
			$("#response").html("Enviando Mensaje ");
			$("#response").fadeIn("slow");
			setTimeout("send('"+datastr+"')",2000);
		}
		return false;
	});
});
function send(datastr){
	$.ajax({	
		type: "POST",
		url: "enviar.php",
		data: datastr,
		cache: false,
		success: function(html){
		$("#response").fadeIn("slow");
		$("#response").html(html);
		setTimeout('$("#response").fadeOut("slow")',2000);
	}
	});
}

ENVIAR.PHP

Código:

<?php
				$nombre=$_POST['nombre'];
				$empresa=$_POST['empresa'];
				$telefono=$_POST['telefono'];
				$email=$_POST['email'];
				$ciudad=$_POST['ciudad'];
				$estado=$_POST['estado'];
				$comentarios=$_POST['comentarios'];
				
				$texto="Nombre: $nombre<br>";
				$texto.="Empresa: $empresa<br>";
				$texto.="Teléfono: $telefono<br>";
				$texto.="Email: $email<br>";
				$texto.="Ciudad: $ciudad<br>";
				$texto.="Estado: $estado<br>";
				$texto.="Comentarios: $comentarios";
				$email="[email protected]";
				$asunto="mensaje de un cliente";
				$cabeceras = "Content-type: text/html; charset=utf-8";
				mail($email,$asunto,$texto,$cabeceras);
				
				echo "<h1>Tu mensaje ha sido enviado</h1>";
				echo "<p>Hemos recibido tu mensaje, en breve te responderemos</p>";
				echo "<p>$texto</p>";
				echo" <a href=\"javascript: window.history. go( -1 )\"><image src='Imagenes/botonregresar.png' border='0'></a><br>";
				
				
		     ?>

eulloa · #2 (**permalink**) 30/03/2010, 11:58

¿Y el error? ¿Debemos adivinarlo?

alvarols · #3 (**permalink**) 30/03/2010, 13:27

El problema es que no aparece el recuadro que indique el status de la información enviada.

A ver si de esta forma me doy a entender más fácil.

Esta parte del código ajax es la que modifica el css y el html para que aparezca el mensaje de "se envió exitosamente el correo o no" en la página principal.

Código:

	if (valid!='') {
			$("#response").fadeIn("slow");
			$("#response").html("Error:"+valid);
		}
		else {
			var datastr ='nombre=' + nombre + '&empresa=' + empresa + '&telefono=' + telefono + '&email=' + email + '&ciudad=' + ciudad + '&estado=' + estado + '&comentarios=' + comentarios;
			$("#response").css("display", "block");
			$("#response").html("Enviando Mensaje ");
			$("#response").fadeIn("slow");
			setTimeout("send('"+datastr+"')",2000);
		}
		return false;
	});
});
function send(datastr){
	$.ajax({	
		type: "POST",
		url: "enviar.php",
		data: datastr,
		cache: false,
		success: function(html){
		$("#response").fadeIn("slow");
		$("#response").html(html);
		setTimeout('$("#response").fadeOut("slow")',2000);
	}
	});

En el header de la página principal, llamo al ajax y al jquery

Código:

<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="ajax.js"></script>

Y en el </body> de la página principal esta el id que debe de modificar el ajax:

Código:

<div id="response"></div>

eulloa · #4 (**permalink**) 30/03/2010, 13:43

Pregunta tonta: ¿está creado el div #response en tu página?

eulloa · #5 (**permalink**) 30/03/2010, 13:47

Ahora q miro bien, en vez de

Código HTML:

Ver original$("#response").html("Error:"+valid);

No será

Código HTML:

Ver original$("#response").text("Error:"+valid);

alvarols · #6 (**permalink**) 30/03/2010, 13:56

Cita:

Iniciado por eulloa

Pregunta tonta: ¿está creado el div #response en tu página?

Si, está creado, es este:

<div id="response"></div> Y lo puse en la parte superior del formulario de correo

cambié el html por el text y nada.

El script lo saqué de un código de un tutorial. El código original si está funcionando, pero no se porque al adaptarlo no me funciona.

Este es el formulario:

http://lapanzaesprimero.net/contacto.php

Si quieres te pongo el código del Ajaxmail (que es la aplicación que si sirve, a ver si sirve de referencia).

INDEX.PHP

Código:

<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Send a mail with php and ajax using jquery</title>
	<link rel="stylesheet" type="text/css" href="ajax.css" />
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="ajax.js"></script>
</head>

<body>

<div id="wrap">
	<h1>Send a mail using jquery, php and Ajax</h1>
	<h4>By <a href="http://lastwebdesigner.com" title="web design resources">LastWebDesigner</a></h4>
	<div class="mail">
			<div id="response">
		
		</div>
		<form id="formail" action="" method ="post">
			<label>Name : </label>
			<input type="text" name="name" id="name" />
			<label>Your mail :</label>
			<input type="text" name="mail" id="mail" />
			<label>Subject : </label>
			<input type="text" name="subject" id="subject" />
			<label>Text :</label>
			<textarea name="text" id="text" cols="40" rows="10"></textarea> 
			<input type="submit" value="send mail" id="sendmail" name="sendmail" />
			</form>
	</div>

</div>

</body>
</html>

MAIL.PHP

Código:

<?php
	$mail = $_POST['mail'];
	$name = $_POST['name'];
	$subject = $_POST['subject'];
	$text = $_POST['text'];
	
 $to = "[email protected]";
 $message =" You received  a mail from ".$mail;
 $message .=" Text of the message : ".$text;

 if(mail($to, $subject,$message)){
	echo "mail successful send";
} 
else{ 
	echo "there's some errors to send the mail, verify your server options";
}
?>

AJAX.JS

Código:

 $(document).ready(function(){
	$("#sendmail").click(function(){
		var valid = '';
		var isr = ' is required.';
		var name = $("#name").val();
		var mail = $("#mail").val();
		var subject = $("#subject").val();
		var text = $("#text").val();
		if (name.length<1) {
			valid += '<br />Name'+isr;
		}
		if (!mail.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
			valid += '<br />A valid Email'+isr;
		}
		if (subject.length<1) {
			valid += '<br />Subject'+isr;
		}
		if (text.length<1) {
			valid += '<br />Text'+isr;
		}
		if (valid!='') {
			$("#response").fadeIn("slow");
			$("#response").html("Error:"+valid);
		}
		else {
			var datastr ='name=' + name + '&mail=' + mail + '&subject=' + subject + '&text=' + text;
			$("#response").css("display", "block");
			$("#response").html("Sending message .... ");
			$("#response").fadeIn("slow");
			setTimeout("send('"+datastr+"')",2000);
		}
		return false;
	});
});
function send(datastr){
	$.ajax({	
		type: "POST",
		url: "mail.php",
		data: datastr,
		cache: false,
		success: function(html){
		$("#response").fadeIn("slow");
		$("#response").html(html);
		setTimeout('$("#response").fadeOut("slow")',2000);
	}
	});
}

alvarols · #7 (**permalink**) 30/03/2010, 16:29

Ya pude, ¿cual era el problema?. Que no había puesto los "id" en los apartados de contacto.

Por ejemplo, esto lo tenía así:

<input name="nombre" type="text" value="" size="40" class="inputcolor" />

y debería ir más bien así:

<input name="nombre" id="nombre" type="text" value="" size="40" class="inputcolor" />

eulloa · #8 (**permalink**) 31/03/2010, 14:07

Boff ya ves, cosas así ponen quebraderos de cabeza jajajajaja