Tema: Email
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 21/12/2011, 15:48
Avatar de JeMaGa
JeMaGa
 
Fecha de Ingreso: julio-2011
Ubicación: Bogota
Mensajes: 430
Antigüedad: 12 años, 9 meses
Puntos: 4
Respuesta: Email

Formulario Principal

Código PHP:
Ver original
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  4. <title>Formulario de contacto en AJAX</title>
  5. <link rel="stylesheet" type="text/css" href="main.css">
  6. <script type="text/javascript" src="funciones.js"></script>
  7. </head>
  8.  
  9. <body>
  10. <div id="formContenedor">
  11.     <form id="formulario">
  12.         <div id="transparencia">
  13.             <div id="transparenciaMensaje">aaaaaaaaaaaa</div>
  14.         </div>
  15.         <table>
  16.             <tbody>
  17.                 <tr>
  18.                     <td class="label">Nombre:</td>
  19.                     <td class="campo"><input class="inputNormal" type="text" id="inputNombre"></td>
  20.                     <td class="ayuda"><img src="ayuda.gif" alt="Ayuda" onMouseOver="muestraAyuda(event, 'Nombre')"></td>
  21.                 </tr>
  22.                 <tr>
  23.                     <td class="label">Empresa:</td>
  24.                     <td class="campo"><input class="inputNormal" type="text" id="inputEmpresa"></td>
  25.                     <td class="ayuda"><img src="ayuda.gif" alt="Ayuda" onMouseOver="muestraAyuda(event, 'Empresa')"></td>
  26.                 </tr>
  27.                 <tr>
  28.                     <td class="label">Teléfono:</td>
  29.                     <td class="campo"><input class="inputNormal" type="text" id="inputTelefono"></td>
  30.                     <td class="ayuda"><img src="ayuda.gif" alt="Ayuda" onMouseOver="muestraAyuda(event, 'Telefono')"></td>
  31.                 </tr>
  32.                 <tr>
  33.                     <td class="label">Mail:</td>
  34.                     <td class="campo"><input class="inputNormal" type="text" id="inputCorreo"></td>
  35.                     <td class="ayuda"><img src="ayuda.gif" alt="Ayuda" onMouseOver="muestraAyuda(event, 'Correo')"></td>
  36.                 </tr>
  37.                 <tr>
  38.                     <td class="label">Comentarios:</td>
  39.                     <td class="campo"><textarea class="inputNormal" id="inputComentario"></textarea></td>
  40.                     <td class="ayuda"><img src="ayuda.gif" alt="Ayuda" onMouseOver="muestraAyuda(event, 'Comentario')"></td>
  41.                 </tr>
  42.             </tbody>
  43.         </table>
  44.         <br>
  45.         <div>
  46.             <button id="botonEnviar" onClick="validaForm()" type="button">Enviar</button>  
  47.              
  48.              <button type="reset">Borrar</button>
  49.         </div>
  50.     </form>
  51. </div>
  52.  
  53. <!-- Capa para mostrar los mensajes de ayuda al presionar los iconos correspondientes -->
  54. <div id="mensajesAyuda">
  55.     <div id="ayudaTitulo"></div>
  56.     <div id="ayudaTexto"></div>
  57. </div>
  58. </body>
  59. </html>

funciones.js
Código Javascript:
Ver original
  1. onload=function()
  2. {
  3.     cAyuda=document.getElementById("mensajesAyuda");
  4.     cNombre=document.getElementById("ayudaTitulo");
  5.     cTex=document.getElementById("ayudaTexto");
  6.     divTransparente=document.getElementById("transparencia");
  7.     divMensaje=document.getElementById("transparenciaMensaje");
  8.     form=document.getElementById("formulario");
  9.     urlDestino="mail.php";
  10.    
  11.     claseNormal="input";
  12.     claseError="inputError";
  13.    
  14.     ayuda=new Array();
  15.     ayuda["Nombre"]="Ingrese su nombre. De 4 a 50 caracteres. OBLIGATORIO";
  16.     ayuda["Empresa"]="Ingrese el nombre de la Empresa. De 4 a 50 caracteres.";
  17.     ayuda["Telefono"]="Ingrese el teléfono del contacto.";
  18.     ayuda["Correo"]="Ingrese un e-mail válido. OBLIGATORIO";
  19.     ayuda["Comentario"]="Ingrese el comentario. De 5 a 500 caracteres. OBLIGATORIO";
  20.    
  21.     preCarga("ok.gif", "loading.gif", "error.gif");
  22. }
  23.  
  24. function preCarga()
  25. {
  26.     imagenes=new Array();
  27.     for(i=0; i<arguments.length; i++)
  28.     {
  29.         imagenes[i]=document.createElement("img");
  30.         imagenes[i].src=arguments[i];
  31.     }
  32. }
  33.  
  34. function nuevoAjax()
  35. {
  36.     var xmlhttp=false;
  37.     try
  38.     {
  39.         // No IE
  40.         xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
  41.     }
  42.     catch(e)
  43.     {
  44.         try
  45.         {
  46.             // IE
  47.             xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  48.         }
  49.         catch(E) { xmlhttp=false; }
  50.     }
  51.     if (!xmlhttp && typeof XMLHttpRequest!="undefined") { xmlhttp=new XMLHttpRequest(); }
  52.     return xmlhttp;
  53. }
  54.  
  55. function limpiaForm()
  56. {
  57.     for(i=0; i<=4; i++)
  58.     {
  59.         form.elements[i].className=claseNormal;
  60.     }
  61.     document.getElementById("inputComentario").className=claseNormal;
  62. }
  63.  
  64. function campoError(campo)
  65. {
  66.     campo.className=claseError;
  67.     error=1;
  68. }
  69.  
  70. function ocultaMensaje()
  71. {
  72.     divTransparente.style.display="none";
  73. }
  74.  
  75. function muestraMensaje(mensaje)
  76. {
  77.     divMensaje.innerHTML=mensaje;
  78.     divTransparente.style.display="block";
  79. }
  80.  
  81. function eliminaEspacios(cadena)
  82. {
  83.     // Funcion para eliminar espacios delante y detras de cada cadena
  84.     while(cadena.charAt(cadena.length-1)==" ") cadena=cadena.substr(0, cadena.length-1);
  85.     while(cadena.charAt(0)==" ") cadena=cadena.substr(1, cadena.length-1);
  86.     return cadena;
  87. }
  88.  
  89. function validaLongitud(valor, permiteVacio, minimo, maximo)
  90. {
  91.     var cantCar=valor.length;
  92.     if(valor=="")
  93.     {
  94.         if(permiteVacio) return true;
  95.         else return false;
  96.     }
  97.     else
  98.     {
  99.         if(cantCar>=minimo && cantCar<=maximo) return true;
  100.         else return false;
  101.     }
  102. }
  103.  
  104. var nav4 = window.Event ? true : false;
  105. function acceptNum(evt){  
  106. var key = nav4 ? evt.which : evt.keyCode;  
  107. return (key <= 13 || (key>= 48 && key <= 57));
  108. }
  109.  
  110. function validaCorreo(valor)
  111. {
  112.     var reg=/(^[a-zA-Z0-9._-]{1,30})@([a-zA-Z0-9.-]{1,30}$)/;
  113.     if(reg.test(valor)) return true;
  114.     else return false;
  115. }
  116.  
  117. function validaForm()
  118. {
  119.     limpiaForm();
  120.     error=0;
  121.    
  122.     var nombre=eliminaEspacios(form.inputNombre.value);
  123.     var empresa=eliminaEspacios(form.inputEmpresa.value);
  124.     var telefono=eliminaEspacios(form.inputTelefono.value);
  125.     var correo=eliminaEspacios(form.inputCorreo.value);
  126.     var comentarios=eliminaEspacios(form.inputComentario.value);
  127.    
  128.     if(!validaLongitud(nombre, 0, 4, 50)) campoError(form.inputNombre);
  129.     if(!validaLongitud(empresa, 1, 4, 50)) campoError(form.inputEmpresa);
  130.     if(!validaLongitud(telefono, 1, 4, 50)) campoError(form.inputTelefono);
  131.     if(!validaCorreo(correo)) campoError(form.inputCorreo);
  132.     if(!validaLongitud(comentarios, 0, 5, 500)) campoError(form.inputComentario);
  133.    
  134.     if(error==1)
  135.     {
  136.         var texto="<img src='error.gif' alt='Error'><br><br>Error: revise los campos.<br><br><button style='width:80px; height:30px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
  137.         muestraMensaje(texto);
  138.     }
  139.     else
  140.     {
  141.         var texto="<img src='loading.gif' alt='Enviando'><br>Enviando. Por favor espere.<br><br><button style='width:80px; height:30px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ocultar</button>";
  142.         muestraMensaje(texto);
  143.        
  144.         var ajax=nuevoAjax();
  145.         ajax.open("POST", urlDestino, true);
  146.         ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  147.         ajax.send("nombre="+nombre+"&empresa="+empresa+"&telefono="+telefono+"&correo="+correo+"&comentarios="+comentarios);
  148.        
  149.         ajax.onreadystatechange=function()
  150.         {
  151.             if (ajax.readyState==4)
  152.             {
  153.                 var respuesta=ajax.responseText;
  154.                 if(respuesta=="OK")
  155.                 {
  156.                     var texto="<img src='ok.gif' alt='Ok'><br>Gracias por su mensaje.<br>Le responderemos a la brevedad.<br><br><button style='width:80px; height:30px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
  157.                 }
  158.                 else var texto="<img src='error.gif'><br><br>Error: intente más tarde.<br><br><button style='width:80px; height:30px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
  159.                
  160.                 muestraMensaje(texto);
  161.             }
  162.         }
  163.     }
  164. }
  165.  
  166. // Mensajes de ayuda
  167.  
  168. if(navigator.userAgent.indexOf("MSIE")>=0) navegador=0;
  169. else navegador=1;
  170.  
  171. function colocaAyuda(event)
  172. {
  173.     if(navegador==0)
  174.     {
  175.         var corX=window.event.clientX+document.documentElement.scrollLeft;
  176.         var corY=window.event.clientY+document.documentElement.scrollTop;
  177.     }
  178.     else
  179.     {
  180.         var corX=event.clientX+window.scrollX;
  181.         var corY=event.clientY+window.scrollY;
  182.     }
  183.     cAyuda.style.top=corY+20+"px";
  184.     cAyuda.style.left=corX+15+"px";
  185. }
  186.  
  187. function ocultaAyuda()
  188. {
  189.     cAyuda.style.display="none";
  190.     if(navegador==0)
  191.     {
  192.         document.detachEvent("onmousemove", colocaAyuda);
  193.         document.detachEvent("onmouseout", ocultaAyuda);
  194.     }
  195.     else
  196.     {
  197.         document.removeEventListener("mousemove", colocaAyuda, true);
  198.         document.removeEventListener("mouseout", ocultaAyuda, true);
  199.     }
  200. }
  201.  
  202. function muestraAyuda(event, campo)
  203. {
  204.     colocaAyuda(event);
  205.    
  206.     if(navegador==0)
  207.     {
  208.         document.attachEvent("onmousemove", colocaAyuda);
  209.         document.attachEvent("onmouseout", ocultaAyuda);
  210.     }
  211.     else
  212.     {
  213.         document.addEventListener("mousemove", colocaAyuda, true);
  214.         document.addEventListener("mouseout", ocultaAyuda, true);
  215.     }
  216.    
  217.     cNombre.innerHTML=campo;
  218.     cTex.innerHTML=ayuda[campo];
  219.     cAyuda.style.display="block";
  220. }