Mi problema es el siguiente quiero procesar un formulario con ajax y php pero por alguna razon misteriosa, ya que luego de revisar el codigo no entiendo por que pasa esto, me sale el mensaje en el div, "enviando.." luego de un tiempo sale "enviado" pero nunca hace lo que tiene el archivo php.
Dejo la pagina asi y luego de unos 20 segundos redirecciona al archivo php y hace lo que tenia que hacer. Lo que por obvias razones no esta bien ya que la idea de ajax es que no recargue la pagina :(
Gracias a los que se tomen el trabajo de leerme y revisar el codigo lo dejo acontinuacion
Código HTML:
<div class="formulario"> <h2>Envíanos tus dudas</h2> <form method='post' action='form.php' name='formulario' > <table> <tr><td> <p> <input type="text" value="Ingrese nombre completo" id="nombres" name="nombres" onfocus="informa('nombres','aquiNombre','aquiNombreVacio','aquiNombreLleno','Ingrese nombre completo');" onblur="saleVacio('nombres','aquiNombre','aquiNombreVacio','aquiNombreLleno','Ingrese nombre completo');" /> </p> </td> <td> <div id="aquiNombre" style="display:none"> <label> ¡Vamos debes darnos tu nombre!</label> </div> <div id="aquiNombreVacio" style="display:none;color:#B40404;"> <label> ¡Es necesario que escribas tu nombre!</label> </div> <div id="aquiNombreLleno" style="display:none;color:#31B404;"> <label> ¡Excelente ya tenemos tu nombre!</label> </div> </td></tr> <tr> <td> <p> <input type="text" id="email" value="Correo electronico" name="email" onfocus="informa('email','aquiEmail','aquiEmailVacio','aquiEmailLleno','Correo electronico');" onblur="emailValido('email','aquiEmail','aquiEmailVacio','aquiEmailLleno','Correo electronico');"/> </p> </td> <td> <div id="aquiEmail" style="display:none"> <label> ¿Cual es tu direccion de correo electronico?</label> </div> <div id="aquiEmailVacio" style="display:none;color:#B40404;"> <label> ¡Necesitamos email! por favor escribelo</label> </div> <div id="aquiEmailLleno" style="display:none;color:#31B404;"> <label> ¡Genial! ya tenemos tu correo electronico</label> </div> </td> </tr> <tr> <td> <p > <input type="text" id="tema" value="Tu tema aqui" name="tema" onfocus="informa('tema','aquiTema','aquiTemaVacio','aquiTemaLleno','Tu tema aqui');" onblur="saleVacio('tema','aquiTema','aquiTemaVacio','aquiTemaLleno','Tu tema aqui');"/> </p> </td> <td> <div id="aquiTema" style="display:none"> <label> ¿Sobre que quieres opinar o tienes dudas?</label> </div> <div id="aquiTemaVacio" style="display:none;color:#B40404;"> <label> ¿Seguro que tienes dudas o quieres dejar un comentario? especifica el tema... </label> </div> <div id="aquiTemaLleno" style="display:none;color:#31B404;"> <label> ¡Vale! buen tema</label> </div> </td> </tr> <tr> <td> <p> <select name="pais" onfocus="mostrarCapa('pais','aquiPais','aquiPaisVacio','Seleccione su pais')" id="pais" onblur="mostrarSelect('pais','aquiPais','aquiPaisVacio','aquiPaisLleno','Seleccione su pais')"> <option>Seleccione su pais</option> <option> Argentina</option> <option> Bolivia</option> <option> Brasil</option> <option> Chile</option> <option values="colombia"> Colombia</option> <option> Costa Rica</option> <option> Cuba</option> <option> República Dominicana</option> <option> Ecuador</option> <option> El Salvador</option> <option>Guatemala</option> <option> Haití</option> <option> Honduras</option> <option>México </option> <option>Nicaragua</option> <option> Panamá</option> <option> Paraguay</option> <option> Perú</option> <option> Puerto Rico</option> <option>Uruguay</option> <option> Venezuela</option> <option> España</option> <option> Otro</option> </select> </p> </td> <td> <div id="aquiPais" style="display:none"> <label> ¡Nos interesa saber desde donde nos escribes!</label> </div> <div id="aquiPaisVacio" style="display:none;color:#B40404;"> <label> Por favor selecciona tu pais </label> </div> <div id="aquiPaisLleno" style="display:none;color:#31B404;"> <label> ¡Oh! Asi que de aqui eres</label> </div> </td> </tr> <tr> <td> <p> <select name="sexo" id="sexo" onfocus="mostrarCapa('sexo','aquiSexo','aquiSexoVacio','Sexo')" onblur="mostrarSelect('sexo','aquiSexo','aquiSexoVacio','aquiSexoLleno','Sexo')"> <option>Sexo</option> <option>Masculino</option> <option>Femenino</option> </select> </p> </td> <td> <div id="aquiSexo" style="display:none"> <label> ¡Aja y tu que!</label> </div> <div id="aquiSexoVacio" style="display:none;color:#B40404;"> <label> Por favor selecciona tu genero </label> </div> <div id="aquiSexoLleno" style="display:none;color:#31B404;"> <label> ¡Oh! ya veo</label> </div> </td> </tr> <tr> <td> <p> <textarea name="comentarios" id="comentarios" maxlength="5000"; onfocus="informa('comentarios','aquiComentarios','aquiComentariosVacio','aquiComentariosLleno','Escribe tu comentario');" onblur="saleVacio('comentarios','aquiComentarios','aquiComentariosVacio','aquiComentariosLleno','Escribe tu comentario');">Escribe tu comentario</textarea> </p> </td> <td> <div id="aquiComentarios" style="display:none"> <label> Envianos tu duda o comentario,te responderemos lo mas pronto posible, o publicalo en la web puede que alguien de la comunidad te responda antes!</label> </div> <div id="aquiComentariosVacio" style="display:none;color:#B40404;"> <label> ¡Si no escribes nada no sabremos de que se trata tu duda!</label> </div> <div id="aquiComentariosLleno" style="display:none;color:#31B404;"> <label> ¡Gracias!</label> </div> </td> </tr> <tr> <? require_once('recaptchalib.php'); //Llaves de la captcha $captcha_publickey = "6Lfasdfdasfdasfasfb"; $captcha_privatekey = "6Lasdfsadfdasfas3?"; //por ahora ponemos a null el error de la captcha $error_captcha=null; ?> </table> <? echo recaptcha_get_html($captcha_publickey, $error_captcha); ?> <div class="divpubli3" id="detalles"></div> <div class="enviar"> <input type="button" value="Enviar" id="boton1" onclick="valida_enviar()" /> </div> </form>
Es un formulario que se ve bonito nada mas XD creo que aqui podriamos revisar el action.
Ahora el archivo que va de ajax js
Código PHP:
addEvent(window,'load',inicializarEventos,false);
function inicializarEventos()
{
var ob=document.getElementById('boton1');
addEvent(ob,'click',enviarDatos,false);
}
function enviarDatos(e)
{
if (window.event)
window.event.returnValue=false;
else
if (e)
e.preventDefault();
enviarFormulario();
}
function retornarDatos()
{
var cad='';
var nombres=document.getElementById('nombres').value;
var email=document.getElementById('email').value;
var tema=document.getElementById('tema').value;
var pais=document.getElementById('pais').value;
var sexo=document.getElementById('sexo').value;
var comentarios=document.getElementById('comentarios').value;
cad='nombre='+encodeURIComponent(nombres)+'&email='+encodeURIComponent(email)+'&tema='+encodeURIComponent(tema)+'&pais='+encodeURIComponent(pais)+'&sexo='+encodeURIComponent(sexo)+'&comentarios='+encodeURIComponent(comentarios);
alert(cad);
return cad;
}
var conexion1;
function enviarFormulario()
{
conexion1=crearXMLHttpRequest();
conexion1.onreadystatechange = procesarEventos;
conexion1.open('POST','form.php', true);
conexion1.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
conexion1.send(retornarDatos());
}
function procesarEventos()
{
var detalles = document.getElementById("detalles");
if(conexion1.readyState == 4)
{
detalles.innerHTML = 'Enviado';
}
else
{
detalles.innerHTML = 'Enviando...';
}
}
//***************************************
//Funciones comunes a todos los problemas
//***************************************
function addEvent(elemento,nomevento,funcion,captura)
{
if (elemento.attachEvent)
{
elemento.attachEvent('on'+nomevento,funcion);
return true;
}
else
if (elemento.addEventListener)
{
elemento.addEventListener(nomevento,funcion,captura);
return true;
}
else
return false;
}
function crearXMLHttpRequest()
{
var xmlHttp=null;
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else
if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
return xmlHttp;
}
Archivo que segun yo tiene todo bien
Y ahora el php
