Foros del Web » Programando para Internet » PHP »

Problemas con formulario en Ajax y PHP

Estas en el tema de Problemas con formulario en Ajax y PHP en el foro de PHP en Foros del Web. Hola Como están? necesito de su ayuda!!!! Estoy haciendo mi website y me estoy volviendo loca con el formulario de contacto, lo hice en php ...
  #1 (permalink)  
Antiguo 06/02/2012, 08:49
 
Fecha de Ingreso: marzo-2011
Ubicación: bs as
Mensajes: 26
Antigüedad: 13 años, 1 mes
Puntos: 0
Problemas con formulario en Ajax y PHP

Hola Como están? necesito de su ayuda!!!!
Estoy haciendo mi website y me estoy volviendo loca con el formulario de contacto, lo hice en php y ajax, el problema, funciona bárbaro (me envia los datos al mail y todo) pero.... el problema radica en q una vez q los datos son enviados el mensaje "Enviando. Por favor espere." no cambia al mensaje "Gracias por su mensaje.Le responderemos a la brevedad."
La verdad es que no puedo encontrar cual es el error en el AJAX.

Les paso mis códigos a ver si alguien me puede ayudar:

desde ya .. graciassssss!

AJAX (archivo llamado funciones.js)
Código:
// Variables para setear
onload=function() 
{
	cAyuda=document.getElementById("mensajesAyuda");
	cNombre=document.getElementById("ayudaTitulo");
	cTex=document.getElementById("ayudaTexto");
	divTransparente=document.getElementById("transparencia");
	divMensaje=document.getElementById("transparenciaMensaje");
	form=document.getElementById("formulario");
	urlDestino="CSS/mail.php";
	
	claseNormal="input";
	claseError="inputError";
	
	ayuda=new Array();
	ayuda["Nombre"]="Ingresa tu nombre. De 4 a 50 caracteres. OBLIGATORIO";
	ayuda["Apellido"]="Ingresa tu apellido. De 4 a 50 caracteres.";
	ayuda["Telefono"]="Ingresa un teléfono de contacto.";
	ayuda["email"]="Ingresa un e-mail válido. OBLIGATORIO";
	ayuda["Comentario"]="Ingresa tus comentarios. De 5 a 500 caracteres. OBLIGATORIO";
	
	preCarga("ok.gif", "loading.gif", "error.gif");
}

function preCarga()
{
	imagenes=new Array();
	for(i=0; i<arguments.length; i++)
	{
		imagenes[i]=document.createElement("img");
		imagenes[i].src=arguments[i];
	}
}

function nuevoAjax()
{ 
	var xmlhttp=false; 
	try 
	{ 
		// No IE
		xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); 
	}
	catch(e)
	{ 
		try
		{ 
			// IE 
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
		} 
		catch(E) { xmlhttp=false; }
	}
	if (!xmlhttp && typeof XMLHttpRequest!="undefined") { xmlhttp=new XMLHttpRequest(); } 
	return xmlhttp; 
}

function limpiaForm()
{
	for(i=0; i<=4; i++)
	{
		form.elements[i].className=claseNormal;
	}
	document.getElementById("inputComentario").className=claseNormal;
}

function campoError(campo)
{
	campo.className=claseError;
	error=1;
}

function ocultaMensaje()
{
	divTransparente.style.display="none";
}

function muestraMensaje(mensaje)
{
	divMensaje.innerHTML=mensaje;
	divTransparente.style.display="block";
}

function eliminaEspacios(cadena)
{
	// Funcion para eliminar espacios delante y detras de cada cadena
	while(cadena.charAt(cadena.length-1)==" ") cadena=cadena.substr(0, cadena.length-1);
	while(cadena.charAt(0)==" ") cadena=cadena.substr(1, cadena.length-1);
	return cadena;
}

function validaLongitud(valor, permiteVacio, minimo, maximo)
{
	var cantCar=valor.length;
	if(valor=="")
	{
		if(permiteVacio) return true;
		else return false;
	}
	else
	{
		if(cantCar>=minimo && cantCar<=maximo) return true;
		else return false;
	}
}

function validaemail(valor)
{
	var reg=/(^[a-zA-Z0-9._-]{1,30})@([a-zA-Z0-9.-]{1,30}$)/;
	if(reg.test(valor)) return true;
	else return false;
}

function validaForm()
{
	limpiaForm();
	error=0;
	
	var nombre=eliminaEspacios(form.inputNombre.value);
	var apellido=eliminaEspacios(form.inputApellido.value);
	var telefono=eliminaEspacios(form.inputTelefono.value);
	var email=eliminaEspacios(form.inputemail.value);
	var comentarios=eliminaEspacios(form.inputComentario.value);
	
	if(!validaLongitud(nombre, 0, 4, 50)) campoError(form.inputNombre);
	if(!validaLongitud(apellido, 1, 4, 50)) campoError(form.inputApellido);
	if(!validaLongitud(telefono, 1, 4, 50)) campoError(form.inputTelefono);
	if(!validaemail(email)) campoError(form.inputemail);
	if(!validaLongitud(comentarios, 0, 5, 500)) campoError(form.inputComentario);
	
	if(error==1)
	{
		var texto="<img src='imagenes/error.gif' alt='Error'><br><br>Error: revise los campos en rojo.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
		muestraMensaje(texto);
	}
	else
	{
		var texto="<img src='imagenes/loading.gif' alt='Enviando'><br>Enviando. Por favor espere.<br><br><button style='width:60px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ocultar</button>";
		muestraMensaje(texto);
		
		var ajax=nuevoAjax();
		ajax.open("POST", urlDestino, true);
		ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		ajax.send("nombre="+nombre+"&apellido="+apellido+"&telefono="+telefono+"&email="+email+"&comentarios="+comentarios);
		
		ajax.onreadystatechange=function()
		{
			if (ajax.readyState==4)
			{
				var respuesta=ajax.responseText;
				if(respuesta=="OK")
				
					var texto="<img src='imagenes/ok.gif' alt='Ok'><br>Gracias por su mensaje.<br>Le responderemos a la brevedad.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
				
				else
				{ var texto="<img src='imagenes/error.gif'><br><br>Error: intente m&aacute;s tarde.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
				
				muestraMensaje(texto);}
			}
		}
	}
}

// Mensajes de ayuda

if(navigator.userAgent.indexOf("MSIE")>=0) navegador=0;
else navegador=1;

function colocaAyuda(event)
{
	if(navegador==0)
	{
		var corX=window.event.clientX+document.documentElement.scrollLeft;
		var corY=window.event.clientY+document.documentElement.scrollTop;
	}
	else
	{
		var corX=event.clientX+window.scrollX;
		var corY=event.clientY+window.scrollY;
	}
	cAyuda.style.top=corY+20+"px";
	cAyuda.style.left=corX+15+"px";
}

function ocultaAyuda()
{
	cAyuda.style.display="none";
	if(navegador==0) 
	{
		document.detachEvent("onmousemove", colocaAyuda);
		document.detachEvent("onmouseout", ocultaAyuda);
	}
	else 
	{
		document.removeEventListener("mousemove", colocaAyuda, true);
		document.removeEventListener("mouseout", ocultaAyuda, true);
	}
}

function muestraAyuda(event, campo)
{
	colocaAyuda(event);
	
	if(navegador==0) 
	{ 
		document.attachEvent("onmousemove", colocaAyuda); 
		document.attachEvent("onmouseout", ocultaAyuda); 
	}
	else 
	{
		document.addEventListener("mousemove", colocaAyuda, true);
		document.addEventListener("mouseout", ocultaAyuda, true);
	}
	
	cNombre.innerHTML=campo;
	cTex.innerHTML=ayuda[campo];
	cAyuda.style.display="block";
}

PHP (archivo llamado mail.php)
Código PHP:
<?php
function validaLongitud($valor$permiteVacio$minimo$maximo)
{
    
$cantCar=strlen($valor);
    if(empty(
$valor))
    {
        if(
$permiteVacio) return TRUE;
        else return 
FALSE;
    }
    else
    {
        if(
$cantCar>=$minimo && $cantCar<=$maximo) return TRUE;
        else return 
FALSE;
    }
}

function 
validaemail($valor)
{
    if(
eregi("([a-zA-Z0-9._-]{1,30})@([a-zA-Z0-9.-]{1,30})"$valor)) return TRUE;
    else return 
FALSE;
}

// MAIN    

if($_POST)
{
    foreach(
$_POST as $clave => $valor) $$clave=addslashes(trim(utf8_decode($valor)));
    
sleep(5);
    if(!
validaLongitud($nombre0450)) $error=1;
    if(!
validaLongitud($apellido1450)) $error=1;
    if(!
validaLongitud($telefono1450)) $error=1;
    if(!
validaemail($email)) $error=1;
    if(!
validaLongitud($comentarios05500)) $error=1;
    
    if(
$error==1) echo "Error";
    else
    {
        
$fecha=date("d/m/y - H:i");
        
$mensaje="
Tenés un nuevo mensaje desde el Sitio:

Fecha: $fecha
Nombre: $nombre
Apellido: $apellido
Telefono: $telefono
email: $email
Comentarios: $comentarios"
;
        
mail("[email protected]""Comentario desde la Web"$mensaje"From: Sitio Web <www.........com.ar>");
        echo 
"OK";
    }
}
$dest "[email protected]";
// Estas son cabeceras que se usan para evitar que el correo llegue a SPAM:
$headers "From: $nombre $email\r\n";
$headers .= "X-Mailer: PHP5\n";
$headers .= 'MIME-Version: 1.0' "\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' "\r\n";
?>

MUCHAS GRACIAS!!!
  #2 (permalink)  
Antiguo 06/02/2012, 10:20
 
Fecha de Ingreso: noviembre-2007
Ubicación: Etzatlan, Jalisco
Mensajes: 50
Antigüedad: 16 años, 4 meses
Puntos: 18
Respuesta: Problemas con formulario en Ajax y PHP

El único posible problema que observo es

Código Javascript:
Ver original
  1. if(respuesta=="OK")

Estas segura que respuesta va a llegar a ser igual a OK

Saludos.
  #3 (permalink)  
Antiguo 06/02/2012, 10:28
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 15 años, 8 meses
Puntos: 1532
Respuesta: Problemas con formulario en Ajax y PHP

además le falta verificar ajax.status == 200 consulte un manual de AJAX

en efecto y como le indica @anarkes debe hacer una limpieza de caracteres invisibles para que la comprobación de cadenas en JS no falle
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #4 (permalink)  
Antiguo 06/02/2012, 10:30
Avatar de luis010182  
Fecha de Ingreso: julio-2009
Ubicación: Argentina - Capital Federal
Mensajes: 382
Antigüedad: 14 años, 9 meses
Puntos: 27
Respuesta: Problemas con formulario en Ajax y PHP

yo te recomendaria, que uses jquery, la funcionalidad de ajax es mucho pero mucho mas sencilla.
Tomate 5 min y lee esto http://www.cristalab.com/tutoriales/...-jquery-c226l/
En funcion ajax en jquery, podes hacer :
- algo antes de enviar los datos ( validar los datos con las funciones que tenes armadas, y colocar el mensaje).
- algo despues de enviar los datos(alertar de un error o cambiar el mensaje ).

en el ejemplo el resultado del procesmiento del formulario(resultado del php) son devueltos en la variable "datos"
Código:
success: function(datos){
     alert(datos);
}
Espero que te sea util al informacion, usando jquery u otra libreria de java script te vas a ahora mucho tiempo y dolores de cabeza, te lo digo por experiencia
  #5 (permalink)  
Antiguo 06/02/2012, 12:09
 
Fecha de Ingreso: marzo-2011
Ubicación: bs as
Mensajes: 26
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: Problemas con formulario en Ajax y PHP

ok muchas gracias por el consejo!!!.
Si la verdad soy nueva en esto del ajax pero me parecio copado el hecho de que no refresque x completo la pagina.
Voy a verificar lo q me dicen y a leer el link q me pasan. y ..... si no lo soluciono, éstaré de vuelta por aca jajj

gracias, besos!
  #6 (permalink)  
Antiguo 02/03/2012, 06:25
 
Fecha de Ingreso: noviembre-2008
Mensajes: 2
Antigüedad: 15 años, 4 meses
Puntos: 0
Respuesta: Problemas con formulario en Ajax y PHP

Cita:
Iniciado por alepa Ver Mensaje
Hola Como están? necesito de su ayuda!!!!
Estoy haciendo mi website y me estoy volviendo loca con el formulario de contacto, lo hice en php y ajax, el problema, funciona bárbaro (me envia los datos al mail y todo) pero.... el problema radica en q una vez q los datos son enviados el mensaje "Enviando. Por favor espere." no cambia al mensaje "Gracias por su mensaje.Le responderemos a la brevedad."
La verdad es que no puedo encontrar cual es el error en el AJAX.

Les paso mis códigos a ver si alguien me puede ayudar:

desde ya .. graciassssss!

AJAX (archivo llamado funciones.js)
Código:
// Variables para setear
onload=function() 
{
	cAyuda=document.getElementById("mensajesAyuda");
	cNombre=document.getElementById("ayudaTitulo");
	cTex=document.getElementById("ayudaTexto");
	divTransparente=document.getElementById("transparencia");
	divMensaje=document.getElementById("transparenciaMensaje");
	form=document.getElementById("formulario");
	urlDestino="CSS/mail.php";
	
	claseNormal="input";
	claseError="inputError";
	
	ayuda=new Array();
	ayuda["Nombre"]="Ingresa tu nombre. De 4 a 50 caracteres. OBLIGATORIO";
	ayuda["Apellido"]="Ingresa tu apellido. De 4 a 50 caracteres.";
	ayuda["Telefono"]="Ingresa un teléfono de contacto.";
	ayuda["email"]="Ingresa un e-mail válido. OBLIGATORIO";
	ayuda["Comentario"]="Ingresa tus comentarios. De 5 a 500 caracteres. OBLIGATORIO";
	
	preCarga("ok.gif", "loading.gif", "error.gif");
}

function preCarga()
{
	imagenes=new Array();
	for(i=0; i<arguments.length; i++)
	{
		imagenes[i]=document.createElement("img");
		imagenes[i].src=arguments[i];
	}
}

function nuevoAjax()
{ 
	var xmlhttp=false; 
	try 
	{ 
		// No IE
		xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); 
	}
	catch(e)
	{ 
		try
		{ 
			// IE 
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
		} 
		catch(E) { xmlhttp=false; }
	}
	if (!xmlhttp && typeof XMLHttpRequest!="undefined") { xmlhttp=new XMLHttpRequest(); } 
	return xmlhttp; 
}

function limpiaForm()
{
	for(i=0; i<=4; i++)
	{
		form.elements[i].className=claseNormal;
	}
	document.getElementById("inputComentario").className=claseNormal;
}

function campoError(campo)
{
	campo.className=claseError;
	error=1;
}

function ocultaMensaje()
{
	divTransparente.style.display="none";
}

function muestraMensaje(mensaje)
{
	divMensaje.innerHTML=mensaje;
	divTransparente.style.display="block";
}

function eliminaEspacios(cadena)
{
	// Funcion para eliminar espacios delante y detras de cada cadena
	while(cadena.charAt(cadena.length-1)==" ") cadena=cadena.substr(0, cadena.length-1);
	while(cadena.charAt(0)==" ") cadena=cadena.substr(1, cadena.length-1);
	return cadena;
}

function validaLongitud(valor, permiteVacio, minimo, maximo)
{
	var cantCar=valor.length;
	if(valor=="")
	{
		if(permiteVacio) return true;
		else return false;
	}
	else
	{
		if(cantCar>=minimo && cantCar<=maximo) return true;
		else return false;
	}
}

function validaemail(valor)
{
	var reg=/(^[a-zA-Z0-9._-]{1,30})@([a-zA-Z0-9.-]{1,30}$)/;
	if(reg.test(valor)) return true;
	else return false;
}

function validaForm()
{
	limpiaForm();
	error=0;
	
	var nombre=eliminaEspacios(form.inputNombre.value);
	var apellido=eliminaEspacios(form.inputApellido.value);
	var telefono=eliminaEspacios(form.inputTelefono.value);
	var email=eliminaEspacios(form.inputemail.value);
	var comentarios=eliminaEspacios(form.inputComentario.value);
	
	if(!validaLongitud(nombre, 0, 4, 50)) campoError(form.inputNombre);
	if(!validaLongitud(apellido, 1, 4, 50)) campoError(form.inputApellido);
	if(!validaLongitud(telefono, 1, 4, 50)) campoError(form.inputTelefono);
	if(!validaemail(email)) campoError(form.inputemail);
	if(!validaLongitud(comentarios, 0, 5, 500)) campoError(form.inputComentario);
	
	if(error==1)
	{
		var texto="<img src='imagenes/error.gif' alt='Error'><br><br>Error: revise los campos en rojo.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
		muestraMensaje(texto);
	}
	else
	{
		var texto="<img src='imagenes/loading.gif' alt='Enviando'><br>Enviando. Por favor espere.<br><br><button style='width:60px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ocultar</button>";
		muestraMensaje(texto);
		
		var ajax=nuevoAjax();
		ajax.open("POST", urlDestino, true);
		ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		ajax.send("nombre="+nombre+"&apellido="+apellido+"&telefono="+telefono+"&email="+email+"&comentarios="+comentarios);
		
		ajax.onreadystatechange=function()
		{
			if (ajax.readyState==4)
			{
				var respuesta=ajax.responseText;
				if(respuesta=="OK")
				
					var texto="<img src='imagenes/ok.gif' alt='Ok'><br>Gracias por su mensaje.<br>Le responderemos a la brevedad.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
				
				else
				{ var texto="<img src='imagenes/error.gif'><br><br>Error: intente m&aacute;s tarde.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
				
				muestraMensaje(texto);}
			}
		}
	}
}

// Mensajes de ayuda

if(navigator.userAgent.indexOf("MSIE")>=0) navegador=0;
else navegador=1;

function colocaAyuda(event)
{
	if(navegador==0)
	{
		var corX=window.event.clientX+document.documentElement.scrollLeft;
		var corY=window.event.clientY+document.documentElement.scrollTop;
	}
	else
	{
		var corX=event.clientX+window.scrollX;
		var corY=event.clientY+window.scrollY;
	}
	cAyuda.style.top=corY+20+"px";
	cAyuda.style.left=corX+15+"px";
}

function ocultaAyuda()
{
	cAyuda.style.display="none";
	if(navegador==0) 
	{
		document.detachEvent("onmousemove", colocaAyuda);
		document.detachEvent("onmouseout", ocultaAyuda);
	}
	else 
	{
		document.removeEventListener("mousemove", colocaAyuda, true);
		document.removeEventListener("mouseout", ocultaAyuda, true);
	}
}

function muestraAyuda(event, campo)
{
	colocaAyuda(event);
	
	if(navegador==0) 
	{ 
		document.attachEvent("onmousemove", colocaAyuda); 
		document.attachEvent("onmouseout", ocultaAyuda); 
	}
	else 
	{
		document.addEventListener("mousemove", colocaAyuda, true);
		document.addEventListener("mouseout", ocultaAyuda, true);
	}
	
	cNombre.innerHTML=campo;
	cTex.innerHTML=ayuda[campo];
	cAyuda.style.display="block";
}

PHP (archivo llamado mail.php)
Código PHP:
<?php
function validaLongitud($valor$permiteVacio$minimo$maximo)
{
    
$cantCar=strlen($valor);
    if(empty(
$valor))
    {
        if(
$permiteVacio) return TRUE;
        else return 
FALSE;
    }
    else
    {
        if(
$cantCar>=$minimo && $cantCar<=$maximo) return TRUE;
        else return 
FALSE;
    }
}

function 
validaemail($valor)
{
    if(
eregi("([a-zA-Z0-9._-]{1,30})@([a-zA-Z0-9.-]{1,30})"$valor)) return TRUE;
    else return 
FALSE;
}

// MAIN    

if($_POST)
{
    foreach(
$_POST as $clave => $valor) $$clave=addslashes(trim(utf8_decode($valor)));
    
sleep(5);
    if(!
validaLongitud($nombre0450)) $error=1;
    if(!
validaLongitud($apellido1450)) $error=1;
    if(!
validaLongitud($telefono1450)) $error=1;
    if(!
validaemail($email)) $error=1;
    if(!
validaLongitud($comentarios05500)) $error=1;
    
    if(
$error==1) echo "Error";
    else
    {
        
$fecha=date("d/m/y - H:i");
        
$mensaje="
Tenés un nuevo mensaje desde el Sitio:

Fecha: $fecha
Nombre: $nombre
Apellido: $apellido
Telefono: $telefono
email: $email
Comentarios: $comentarios"
;
        
mail("[email protected]""Comentario desde la Web"$mensaje"From: Sitio Web <www.........com.ar>");
        echo 
"OK";
    }
}
$dest "[email protected]";
// Estas son cabeceras que se usan para evitar que el correo llegue a SPAM:
$headers "From: $nombre $email\r\n";
$headers .= "X-Mailer: PHP5\n";
$headers .= 'MIME-Version: 1.0' "\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' "\r\n";
?>

MUCHAS GRACIAS!!!
Hola mira si en la zona del código js, marcada en rojo no te faltan aperturas o cierres de codigo. {}.
if (ajax.readyState==4){
var respuesta=ajax.responseText;
if(respuesta=="OK"){
var texto="<img src='ok.gif' alt='Ok'><br>Gracias por su mensaje.<br>Le responderemos en breve.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
}else {
var texto="<img src='error.gif'><br><br>Error: intente m·s tarde.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
}
muestraMensaje(texto);
}
Según tu código, solo sale el mensaje cuando hay error, pero no cuando lo hace bien, que no termina de presentarlo.
Un saludo,

Etiquetas: ajax, formulario, html, variables
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:10.