Ver Mensaje Individual
  #1 (permalink)  
Antiguo 02/04/2012, 15:11
Hialek
 
Fecha de Ingreso: octubre-2007
Mensajes: 2
Antigüedad: 16 años, 6 meses
Puntos: 0
Formulario HTML+CSS+JS+PHP+AJAX no se une

Buenas. Soy antiguo en este foro, pero esta es mi primera vez posteando, pues tambien es la primera vez que solo leer no me es de ayuda aquí.

El problema es el siguiente... tengo un formulario animado y validado con Javascript (Funciona perfecto en todo navegador). Además, hice un envio de los datos utilizando un archivo PHP que puedo invocar mediante el atributo "action" del formulario (cosa que prefiero evitar). Y como al llamar al archivo php me lleva hasta la página donde carga el fichero php, utilice un pequeño codigo en ajax que capta el envio y evita que la página cambie. Al evitarlo, hago uso de otra pequeña funcion en javascript que modifica dos "divs" de modo que uno desaparezca y el otro aparezca (se desvanece el formulario y aparece un mensaje para el usuario).
Pese a que pudiera sonar complicado, la verdad es que el formulario es relativamente simple y dependiendo del navegador ocurre alguna anomalia diferente.
En internet explorer, que suele ser el más problematico, funciona bien todo el proceso desde la validacion hasta la recepcion del mail. Sin embargo en mozilla y chrome, solo termina al presionar el boton de envio dos veces y jamás llega a enviar los datos.

Adjunto parte del codigo utilizado para ver si alguien tiene alguna idea de lo que puede ocurrir o me ofrece alguna solución, se lo agradecería mucho, porque ya llevo un par de días tratado de resolver la unión.
Además, considero que la animacion del formulario no hace falta incluirla pues sé que opera correctamente y no hace llamados externos. Asi como la funcion de envio en php que tambien opera bien y tampoco hace llamados a funciones externas.

Gracias a cualquiera que pueda ayudarme

FORMULARIO EN HTML

Código HTML:
Ver original
  1. <form method="post" id="formu" class="centrar" onSubmit="return eliminar(this);">
  2.  
  3.                         <fieldset id="formulario">
  4.                             </br>
  5.                             <h1 class="title" size="200" >CONTACTO</h1>
  6.                             </br>
  7.                             <p><label class="label" for="your-name" name="contact_name" id="contact_name_label">Nombre<em> (Obligatorio)</em></label>
  8.                                 <span><input class="nombre" type="text" name="contact_name" value="" size="40" /></span></p>
  9.                             <p><label class="label" for="your-empresa" name="contact_empresa" id="contact_empresa_label">Empresa</label>
  10.                                 <span><input class="bussines" type="text" name="contact_empresa" value="" size="40" /></span></p>
  11.                             <p><label class="label" for="your-email" name="contact_email" id="contact_email_label">E-Mail<em> (Obligatorio)</em></label>
  12.                                 <span><input class="email" type="text" name="contact_email" value="" size="40" /></span></p>
  13.                             <p><label class="label"  for="your-phone" name="contact_phone" id="contact_phone_label">Telefono</label>
  14.                                 <span><input class="phone"  type="text" name="contact_phone" value="" size="40" /></span></p>
  15.                             <p><label class="label" for="your-country" name="contact_country" id="contact_country_label">Pais</label>
  16.                                 <span><input class="country" type="text" name="contact_country" value="" size="40" /></span></p>                    
  17.                             <p><label class="label" for="your-city" name="contact_city" id="contact_city_label">Ciudad</label>
  18.                                 <span><input class="city" type="text" name="contact_city" value="" size="40" /></span></p>
  19.                             <p><span><textarea name="contact_message" cols="40" rows="5" maxlength="1000" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;">Mensaje (Obligatorio)</textarea></span></p>
  20.  
  21.                             <p><input type="submit" name="enviar" value="Enviar" /><img class="ajax-loader" style="visibility: hidden;" alt="Enviando ..." src="/img/cargando.gif"/></p>
  22.  
  23.  
  24.                         </fieldset>
  25.                     </form>

VALIDACION BASE EN JS:


Código Javascript:
Ver original
  1. function validar(f) {
  2. if (f.contact_name.value=="") {
  3.     alert("Por favor ingrese su nombre");
  4.     f.contact_name.focus();
  5.     return false;
  6.     }
  7. //if (/^[0-9a-z_\-\.]+@[0-9a-z\-\.]+\.[a-z]{2,4}$/i.test(f.contact_email.value))
  8. var exr = /^[0-9a-z_\-\.]+@[0-9a-z\-\.]+\.[a-z]{2,4}$/i;
  9. if(exr.test(f.contact_email.value))
  10.     {
  11.     //alert("CORRECTO");
  12.     }
  13. else
  14.     {
  15.     alert("La dirección de email es incorrecta");
  16.     return false;
  17.     }
  18. if (f.contact_message.value=="" || f.contact_message.value=="Mensaje (Obligatorio)" ) {
  19.     alert("Por favor escriba un mensaje");
  20.     f.contact_message.focus();
  21.     return false;
  22.     }
  23.  
  24.  
  25. return true;
  26.  
  27. }

FUNCION QUE HACE LOS LLAMADOS VALIDAR Y EL TRABAJO SOBRE CSS Y EVITA RECARGA (AJAX)

Código AJAX:
Ver original
  1. function eliminar(a)
  2.             {
  3.                 if(validar(a))
  4.                 {
  5.                    
  6.                     $(document).ready(function()
  7.                     {
  8.  
  9.                     // Interceptamos el evento submit
  10.                     $('#formu').submit(function() {
  11.                        
  12.                     // Enviamos el formulario usando AJAX
  13.                      $.ajax({
  14.                             type: 'POST',
  15.                             url: $(this).attr('enviar.php'),
  16.                             data: $(this).serialize(),
  17.            
  18.                     // Mostramos un mensaje con la respuesta de PHP
  19.                     success: function(data) {
  20.                             //$('#texto').html(data);
  21.                             $('#contact').fadeOut('slow');
  22.                             $('#texto').fadeIn('slow');
  23.                                             }
  24.                             })        
  25.                     return false;
  26.                                                     });
  27.                     })
  28.                    
  29.                     return false;
  30.                    
  31.                 }
  32.                 else
  33.                 {
  34.                     return false;
  35.                 }
  36.             }


Nuevamente gracias a cualquiera que pueda echarme una mano.