Question

[UPDATE]

我的表单遇到了麻烦，我没有通过点击“发送”按钮收到自动发送的电子邮件。

请注意，我没有验证PHP中的字段，而是使用javascript。

以下是代码：

HTML表格

        <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>

使用AJAX更新Javscript表单验证

        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();

PHP文件（email.php）

<?php
$nombre = $_POST['nombre'];
$email = $_POST['email'];  
$tlf = $_POST['tlf'];
$mensaje = $_POST['mensaje'];
// Definir el correo de destino:
$dest = "gerodriguez26@gmail.com"; 

// 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!
}
?>

非常感谢！

更新：

我在我的JS，initForm（）函数中添加了一个AJAX函数来联系PHP文件。

现在它的工作原理!!!!! 我收到一封自动电子邮件!!

BUT

当我点击表单中的“发送”按钮时，我收到错误警告

$.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;
                }

为什么??? ???

在提醒之后，整个页面正在充电，我收到了电子邮件!!!!

所以我不明白为什么$ .ajax会发出警报!!!

我该如何解决？如何使$ .ajax成为'成功'部分而不是'错误'而不是为页面充电？

非常感谢！此致

更新 - 为什么此表单不发送自动电子邮件？

0 个答案: