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!