Ver Mensaje Individual
  #1 (permalink)  
Antiguo 15/07/2013, 07:57
Avatar de loka-por-racing
loka-por-racing
 
Fecha de Ingreso: noviembre-2002
Ubicación: buenos aires
Mensajes: 55
Antigüedad: 22 años
Puntos: 0
Pregunta problema con formulario ajax

buenos días! estoy intentando hacer funcionar un formulario en HTML5 pero no encuentro el porque al hacer click en "enviar" me figura error en el formulario, pero en realidad no da error, ya que se recibe el formulario en el mail. espero puedan darme una mano para ver donde se esta produciendo el error, copio a continuación los códigos:

contacto.html

Código HTML:
<form id="contact-form" name="contact-form" action="php/envio.php" method="post"/>
        <div class="success" id="ajaxsuccess">Formulario enviado correctamente!<br />
          <strong>gracias por contactarse.</strong> </div>
        <fieldset>
        <label class="name">
        <input type="text" value="Nombre:" name="name" id="name" placeholder="Nombre:"  
onfocus="if(this.value == 'Nombre:') this.value='';" onblur="if(this.value == '') this.value='Nombre:';" required />
        <span class="empty" id="err-name">*requerido</span> </label>
        <label class="email">
        <input type="text" value="E-mail:" name="email" id="email" placeholder="E-mail:" 
 onfocus="if(this.value == 'E-mail:') this.value='';" onblur="if(this.value == '') this.value='E-mail:';" required />
        <span class="empty" id="err-email">*requerido</span> <span class="error" id="err-emailvld">*email no válido</span></label>
        <label class="phone">
        <input type="text" value="Telefono:" name="phone" id="phone" placeholder="Telefono:"  
onfocus="if(this.value == 'Telefono:') this.value='';" onblur="if(this.value == '') this.value='Telefono:';" required />
        <span class="empty" id="err-phone">*requerido</span></label>
        <label class="message">
        <textarea name="message" id="message" 
onfocus="if(this.value == 'Mensaje:') this.value='';" onblur="if(this.value == '') this.value='Mensaje:';">Mensaje:</textarea>
        <span class="empty" id="err-message">*requerido</span> </label>
        <button id="send" class="button" type="submit">Enviar</button>
        <div>
            	<div class="error" id="err-form">Ocurrio un error con el formulario. Por favor intente nuevamente!</div>
            	<div class="error" id="err-timedout">El tiempo de conexion con el servidor se termino!</div>
            	<div class="error" id="err-state"></div>
        </div>
        </fieldset>
      </form> 
función.js (es la que llama cuando hace clic en "Enviar")

Código:
$('#send').click(function(){ // when the button is clicked the code executes
		$('.error').fadeOut('slow'); // reset the error messages (hides them)

		var error = false; // we will set this true if the form isn't valid

		var name = $('input#name').val(); // get the value of the input field
		if(name == "" || name == " " || name == "Nombre:") {
			$('#err-name').fadeIn('slow'); // show the error message
			error = true; // change the error state to true
		}

		var email_compare = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/; // Syntax to compare against input
		var email = $('input#email').val().toLowerCase(); // get the value of the input field
		if (email == "" || email == " " || email == "E-mail:") { // check if the field is empty
			$('#err-email').fadeIn('slow'); // error - empty
			error = true;
		}else if (!email_compare.test(email)) { // if it's not empty check the format against our email_compare variable
			$('#err-emailvld').fadeIn('slow'); // error - not right format
			error = true;
		}
		
		var tel = $('input#phone').val(); // get the value of the input field
		if(tel == "" || tel == " " || tel == "Telefono:") {
			$('#err-phone').fadeIn('slow'); // show the error message
			error = true; // change the error state to true
		}
    
		var message = $('textarea#message').val(); // get the value of the input field
		if(message == "" || message == " " || message == "Mensaje:") {
			$('#err-message').fadeIn('slow'); // show the error message
			error = true; // change the error state to true
		} 

		if(error == true) {
			$('#err-form').slideDown('slow');
			return false;
		}

		var data_string = $('#contact-form').serialize(); // Collect data from form
		//alert(data_string);

		$.ajax({
			type: "POST",
			url: $('#contact-form').attr('action'),
			data: data_string,
			timeout: 6000,
			error: function(request,error) {
				if (error == "timeout") {
					$('#err-timedout').slideDown('slow');
				}
				else {
					$('#err-state').slideDown('slow');
					$("#err-state").html('ocurrio un error: ' + error + '');
				}
			},
			success: function() {
				//$('#contact-form').slideUp('slow');
				$('#ajaxsuccess').slideDown('slow');
        $('#ajaxsuccess').delay(4000);
        $('#ajaxsuccess').fadeOut(1000);

        $("#name").val('');
        $("#email").val('');
		$("#phone").val('');
        $("#message").val('');
		$('.error').fadeOut('slow');
		}
		});

		return false; // stops user browser being directed to the php file
	}); // end click function

envio.php

Código PHP:
<?PHP
if (isset($_POST["name"]) && isset($_POST["email"]) && isset($_POST["message"])){
    
$dest "[email protected]";
    
$head "From: [email protected]\r\n";
    
$head.= "To: [email protected]\r\n";
    
// Ahora creamos el cuerpo del mensaje
    
$msg.= "Mensaje enviado desde www.dominio.com\n";
    
$msg.= "------------------------------- \n";
    
$msg.= "NOMBRE:   ".$_POST['name']."\n";
    
$msg.= "EMAIL:    ".$_POST['email']."\n";
    
$msg.= "TEL:      ".$_POST['phone']."\n";
    
$msg.= "------------------------------- \nMENSAJE:\n";
    
$msg.= $_POST['message']."\n\n";
    
$msg.= "------------------------------- \n";
    
// Finalmente enviamos el mensaje
    
if (mail($dest"CONTACTO"$msg$head)) {
        
//envio correcto
    
} else {
        
//error
    
}
}
?>
espero alguien pueda darme una mano. Este mismo código lo probé en otra web y funciona sin inconvenientes es por eso que no logro ver que es lo que me genera ese error ($("#err-state").html('ocurrio un error: ' + error + '');
).
saludos!