Foros del Web » Programando para Internet » Jquery »

problema con formulario ajax

Estas en el tema de problema con formulario ajax en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 15/07/2013, 07:57
Avatar de loka-por-racing  
Fecha de Ingreso: noviembre-2002
Ubicación: buenos aires
Mensajes: 55
Antigüedad: 21 años, 5 meses
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!
  #2 (permalink)  
Antiguo 15/07/2013, 20:28
Avatar de alberto510a  
Fecha de Ingreso: abril-2013
Mensajes: 351
Antigüedad: 11 años
Puntos: 35
Te recomiendo usar console.log() infórmate sobre este método te resultará muy útil para encontrar errores.
  #3 (permalink)  
Antiguo 16/07/2013, 05:46
Avatar de autonotel  
Fecha de Ingreso: junio-2003
Ubicación: Vigo
Mensajes: 480
Antigüedad: 20 años, 10 meses
Puntos: 13
Respuesta: problema con formulario ajax

Siempre te mostrará un error aunque no lo haya. El formulario se envía sin errores pero lo único que hace es mostrarlo.
error: function(request,error) {
if (error){
if (error == "timeout") {
$('#err-timedout').slideDown('slow');
}
else {
$('#err-state').slideDown('slow');
$("#err-state").html('ocurrio un error: ' + error + '');
}
}
}

Algo así. Que te haya funcionado en otra web puede ser por múltiples razones.
  #4 (permalink)  
Antiguo 17/07/2013, 12:05
Avatar de loka-por-racing  
Fecha de Ingreso: noviembre-2002
Ubicación: buenos aires
Mensajes: 55
Antigüedad: 21 años, 5 meses
Puntos: 0
Respuesta: problema con formulario ajax

autonotel, intente con lo que me dijiste pero sigue pasando lo mismo. No se me ocurre que puede ser lo que esta generando que no tome como exitoso el envío.
alberto510a voy a ver que onda eso que me indicas. me esta volviendo loca!! :P

Etiquetas: formulario, html5, js, php+ajax+formularios
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 04:51.