1
Programación Web / Fallo en formulario con JS, PHP y AJAX
« en: Enero 02, 2015, 08:03:18 pm »
Muy buenas!
Tengo problemas con mi formulario.
Lo que quiero es que al clicar el botón 'enviar', me envíe un email automáticamente.
Este es el código:
HTML
JAVASCRIPT para validar en formulario y AJAX para contactar el fichero PHP
Archivo PHP (email.php)
La cuestión es que funciona!
Si os fijáis en este trozo de AJAX:
Hay dos partes: success y error. A priori debería salir la parte del success y no la del error verdad??
Cuando clico el botón 'enviar' me salta el alert de ERROR!, se recarga la página y recibo el email. Por ese orden.
Por qué me salta el alert de ERROR! y se recarga la página? Qué es lo que está mal en este AJAX?
Muchas gracias y saludos!
Tengo problemas con mi formulario.
Lo que quiero es que al clicar el botón 'enviar', me envíe un email automáticamente.
Este es el código:
HTML
Código: [Seleccionar]
<form method="POST" name="form" id="form">
<input id="nombre" autocomplete="name" required="" placeholder="Nombre" name="nombre">
<input id="email" type="email" autocomplete="email" required="" placeholder="Email" name="email">
<input id="tlf" pattern="^((\+?34([ \t|\-])?)?[9|6|7]((\d{1}([ \t|\-])?[0-9]{3})|(\d{2}([ \t|\-])?[0-9]{2}))([ \t|\-])?[0-9]{2}([ \t|\-])?[0-9]{2})$" type="tel" autocomplete="tel" required="" placeholder="Teléfono" name="phone">
<textarea id="mensaje" placeholder="Mensaje"></textarea>
<button id="butCheckout" class="btn">
Enviar
</button>
<p id="mensok">ENVIADO!</p>
</form>
JAVASCRIPT para validar en formulario y AJAX para contactar el fichero PHP
Código: [Seleccionar]
var form;
form = document.getElementById("form");
function initForm() {
form = document.getElementById("form");
form.addEventListener("submit", function(evt) {
if (form.checkValidity() === false) {
evt.preventDefault();
alert("Hay algún error en el formulario");
return false;
}
else {
var nombre = $("#nombre").val();
var email = $("#email").val();
var tlf = $("#tlf").val();
var mensaje = $("#mensaje").val();
var datos = 'nombre='+ nombre + '&email=' + email + '&tlf=' + tlf + '&mensaje=' + mensaje;
$.ajax({
type: "POST",
url: "email.php",
data: datos,
success: function() {
$("#mensok").css("display","block");
$('#form').each(function(){
this.reset();
});
$("#nombre").css("background-color", "#FFF");
$("#email").css("background-color", "#FFF");
$("#tlf").css("background-color", "#FFF");
},
error: function() {
alert("ERROR!");
}
});
return false;
}
});
}
function initInputs() {
var inputs = document.getElementsByTagName("input");
var inputs_len = inputs.length;
var addDirtyClass = function(evt) {
sampleCompleted("Forms-order-dirty");
evt.srcElement.classList.toggle("dirty", true);
};
for (var i = 0; i < inputs_len; i++) {
var input = inputs[i];
input.addEventListener("blur", addDirtyClass);
input.addEventListener("invalid", addDirtyClass);
input.addEventListener("valid", addDirtyClass);
}
}
initForm();
initInputs();
Archivo PHP (email.php)
Código: [Seleccionar]
<?php
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$tlf = $_POST['tlf'];
$mensaje = $_POST['mensaje'];
// Definir el correo de destino:
$dest = "[email protected]";
// Estas son cabeceras que se usan para evitar que el correo llegue a SPAM:
$headers = "From: $nombre <$email>\r\n";
$headers .= "X-Mailer: PHP5\n";
$headers .= 'MIME-Version: 1.0' . "\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
// Aqui definimos el asunto y armamos el cuerpo del mensaje
$asunto = $nombre;
$cuerpo = "Nombre: ".$nombre."<br>";
$cuerpo .= "Email: ".$email."<br>";
$cuerpo .= "Tlf: ".$tlf."<br>";
$cuerpo .= "Mensaje: ".$mensaje;
// Esta es una pequena validación, que solo envie el correo si todas las variables tiene algo de contenido:
if($nombre != '' && $email != '' && $tlf != '' && $mensaje != ''){
mail($dest,$asunto,$cuerpo,$headers); //ENVIAR!
}
?>
La cuestión es que funciona!
Si os fijáis en este trozo de AJAX:
Código: [Seleccionar]
$.ajax({
type: "POST",
url: "email.php",
data: datos,
success: function() {
$("#mensok").css("display","block");
$('#form').each(function(){
this.reset();
});
$("#nombre").css("background-color", "#FFF");
$("#email").css("background-color", "#FFF");
$("#tlf").css("background-color", "#FFF");
},
error: function() {
alert("ERROR!");
}
});
return false;
}
Hay dos partes: success y error. A priori debería salir la parte del success y no la del error verdad??
Cuando clico el botón 'enviar' me salta el alert de ERROR!, se recarga la página y recibo el email. Por ese orden.
Por qué me salta el alert de ERROR! y se recarga la página? Qué es lo que está mal en este AJAX?
Muchas gracias y saludos!