javascript - PHP 表单发送重复的电子邮件

标签 javascript php html contact-form

我有一个 PHP 联系表单，它运行得很好，但现在我的客户说它重复甚至发送了 4-5 倍的联系电子邮件，我的客户说它需要很长时间才能在网页上显示响应告诉用户评论也已发送，但我已经在自己的服务器上进行了测试，一切正常，是否有可能是他们的服务器出现问题？这是我的 html:

<form id="contactForm" action="contacto.php" method="POST" novalidate>  
 <p>
    <label for="nombre">Tu nombre completo</label>
 </p>
 <p>
    <input type="text" name="nombre" id="nombre" placeholder="Nombre y apellidos" required oninvalid="this.setCustomValidity('Por favor, llena todos los campos')" oninput="setCustomValidity('')"/>
 </p>
 <p>
    <label for="correo">Tu e-mail</label>
 </p>
 <p>
    <input type="text" name="correo" id="correo" placeholder="mail@tucorreo.com" required oninvalid="this.setCustomValidity('Por favor, llena todos los campos')" oninput="setCustomValidity('')"/>
 </p>
 <p>
    <label for="asunto">Asunto</label>
 </p>
 <p>
    <input type="text" name="asunto" id="asunto" placeholder="¿Por qué nos escribes?" required oninvalid="this.setCustomValidity('Por favor, llena todos los campos')" oninput="setCustomValidity('')"/>
 </p>
 <p>
    <label for="aspirante">Nombre completo del aspirante</label>
 </p>
 <p>
    <input type="text" name="aspirante" id="aspirante" placeholder="Nombre y apellidos" required oninvalid="this.setCustomValidity('Por favor, llena todos los campos')" oninput="setCustomValidity('')"/>
 </p>
 <p>
    <label for="fecha">Fecha de nacimiento del aspirante</label>
 </p>
 <p>
    <input type="text" name="fecha" id="fecha" placeholder="dd/mm/aa" required oninvalid="this.setCustomValidity('Por favor, llena todos los campos')" oninput="setCustomValidity('')"/>
 </p>
 <p>
    <label for="grado">Grado a cursar</label>
 </p>
 <p>
    <input type="text" name="grado" id="grado" placeholder="Grado a cursar" required oninvalid="this.setCustomValidity('Por favor, llena todos los campos')" oninput="setCustomValidity('')"/>
 </p>
 <p>
    <label for="ciclo">Ciclo escolar</label>
 </p>
 <p>
    <input type="text" name="ciclo" id="ciclo" placeholder="Ej. 2016-2017" required oninvalid="this.setCustomValidity('Por favor, llena todos los campos')" oninput="setCustomValidity('')"/>
 </p>
 <p>
    <label for="escuela">Escuela de procedencia</label>
 </p>
 <p>
    <input type="text" name="escuela" id="escuela" placeholder="Escuela de procedencia" required oninvalid="this.setCustomValidity('Por favor, llena todos los campos')" oninput="setCustomValidity('')"/>
 </p>
 <p>
    <label for="ciudad">Ciudad de origen</label>
 </p>
 <p>
    <input type="text" name="ciudad" id="ciudad" placeholder="Ciudad de origen" required oninvalid="this.setCustomValidity('Por favor, llena todos los campos')" oninput="setCustomValidity('')"/>
 </p>
 <p>
    <label for="comentario">Comentarios</label>
 </p>
 <p>
    <textarea type="text" name="comentario" id="comentario" placeholder="Déjanos saber tus comentarios" required oninvalid="this.setCustomValidity('Por favor, llena todos los campos')" oninput="setCustomValidity('')"/></textarea>
 </p>
 <p class="submit">
    <button type="submit">Enviar</button>
 </p>
</form>

以及验证表单的 JS。发送后我还添加了禁用按钮属性:

<script>
/* Forma Contacto */
$("#contactForm").submit(function(event) {
    /* stop form from submitting normally */
    event.preventDefault();
    /* get some values from elements on the page: */
    var $form = $( this ),
    $submit = $form.find( 'button[type="submit"]' ),
    nombre_value = $form.find( 'input[name="nombre"]' ).val(),
    correo_value = $form.find( 'input[name="correo"]' ).val(),
    asunto_value = $form.find( 'input[name="asunto"]' ).val(),
    aspirante_value = $form.find( 'input[name="aspirante"]' ).val(),
    fecha_value = $form.find( 'input[name="fecha"]' ).val(),
    grado_value = $form.find( 'input[name="grado"]' ).val(),
    ciclo_value = $form.find( 'input[name="ciclo"]' ).val(),
    escuela_value = $form.find( 'input[name="escuela"]' ).val(),
    ciudad_value = $form.find( 'input[name="ciudad"]' ).val(),
    comentario_value = $form.find( 'textarea[name="comentario"]' ).val(),
    url = $form.attr('action');

    if (!event.target.checkValidity()) {
        // the form is not valid
        // show some nice errors here
        $submit.text('Llena todos los campos');
        return false;
    }else{
        /* Send the data using post */
        var posting = $.post( url, { 
            nombre: nombre_value,
            correo: correo_value,
            asunto: asunto_value,
            aspirante: aspirante_value,
            fecha: fecha_value,
            grado: grado_value,
            ciclo: ciclo_value,
            escuela: escuela_value,
            ciudad: ciudad_value,
            comentario: comentario_value,
        });

        posting.done(function( data ){
            /* Put the results in a div */
            $( "#contactResponse" ).html(data);

            /* Change the button text. */
            $submit.text('Enviado');
            /* Disable the button. */
            $submit.attr("disabled", true);
        });
    }
});
</script>

最后是我的 PHP:

<?php

$EmailFrom = "contacto@mail.com";
$EmailTo = "clientmail@mail.com";
$Subject = "Nuevo comentario en el website";
$nombre = Trim(stripslashes($_POST['nombre'])); 
$correo = Trim(stripslashes($_POST['correo'])); 
$asunto = Trim(stripslashes($_POST['asunto']));
$aspirante = Trim(stripslashes($_POST['aspirante'])); 
$fecha = Trim(stripslashes($_POST['fecha'])); 
$grado = Trim(stripslashes($_POST['grado'])); 
$ciclo = Trim(stripslashes($_POST['ciclo'])); 
$escuela = Trim(stripslashes($_POST['escuela'])); 
$ciudad = Trim(stripslashes($_POST['ciudad'])); 
$comentario = Trim(stripslashes($_POST['comentario'])); 

// prepare email body text
$Body = "";
$Body .= "Nombre: ";
$Body .= $nombre;
$Body .= "\n";
$Body .= "E-mail: ";
$Body .= $correo;
$Body .= "\n";
$Body .= "Asunto: ";
$Body .= $asunto;
$Body .= "\n";
$Body .= "Nombre del aspirante: ";
$Body .= $aspirante;
$Body .= "\n";
$Body .= "Fecha de Nacimiento: ";
$Body .= $fecha;
$Body .= "\n";
$Body .= "Grado a cursar: ";
$Body .= $grado;
$Body .= "\n";
$Body .= "Ciclo escolar: ";
$Body .= $ciclo;
$Body .= "\n";
$Body .= "Escuela de procedencia: ";
$Body .= $escuela;
$Body .= "\n";
$Body .= "Ciudad de origen: ";
$Body .= $ciudad;
$Body .= "\n";
$Body .= "Comentario: ";
$Body .= $comentario;
$Body .= "\n";

// send email 
$success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>");

// redirect to success page 
if ($success){
    echo "<h2>¡Gracias! Recibimos tu mensaje</h2>";
}
else{
    echo "<h2>Lo sentimos, hubo un error, inténtalo nuevamente</h2>";
}
?>

我的代码有什么问题吗？正如我所说，我已经在我的服务器上对其进行了测试，一切正常，但在我的客户端服务器上则不然。有什么帮助吗？

最佳答案

我认为基本上有两件事需要回答。 (1) 您的代码可能存在错误，导致用户多次提交同一表单。 (2) PHP脚本如何发送电子邮件(客户提示页面速度慢)。

(1) 我审查了您的 JavaScript 代码，通过阅读它，我认为您应该锁定提交按钮，直到表单的评估状态明确为止。您已经有以下行:

$submit = $form.find( 'button[type="submit"]' )

通过(我假设是 jQuery)检索表单值后，您可以立即执行以下操作:

$submit.prop('disabled', true);

当然，如果很明显该表单无效并且允许用户再次提交，您需要执行以下操作:

$submit.prop('disabled', false);

请注意，如果您使用 jQuery 1.5，上述代码适用于 jQuery 1.6+，正确的代码是:

$submit.attr('disabled', 'disabled');
$submit.removeAttr('disabled');

稍后您的脚本中会有类似的代码。我很难调试它，因为只有代码片段可用，因此我无法在真实的浏览器中调试它。

(2) 在 PHP 中，您使用 mail() 函数，该函数依赖于服务器系统 SMTP/sendmail 配置来投递电子邮件。我假设在您的测试系统中，您有一个正在运行的本地邮件系统。当 PHP mail() 函数在您的计算机上发送邮件时，它可以直接将邮件投递到 localhost 上。然而，在生产环境中，很可能具有身份验证的中央邮件服务器和一切都已就位。这意味着 mail() 函数执行一个复杂的过程，连接到 SMTP 服务器，可能对其进行身份验证，然后丢弃邮件正文并等待服务器响应。仅当服务器成功将您的电子邮件放入其输出队列之一时，服务器才会响应。如果邮件服务器未加载，这也可能需要一些时间。长话短说，与您的客户讨论这种情况，并尝试找到缓解这种情况的方法(在我们的托管中，我们在所有计算机上都有本地邮件转发器SSMTP，这非常有帮助)。

关于javascript - PHP 表单发送重复的电子邮件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35899155/

上一篇：javascript - 如何在 javascript 中减慢 spritesheet 动画的速度？

下一篇：javascript - 如何使用webrtc录制高质量立体声音频？

相关文章：

javascript - jQuery:使字符串中的字母闪烁

javascript - ES-2015 模块可以 self 感知吗？

javascript - 如何创建可以从 React js 中的状态更改的动态表单？

javascript - 通用模块定义-写作风格

php - php和mysql中的数据结构

外部js文件中的php数组

php - 简单的 PHP 邮件功能不适用于亚马逊服务器 EC2

javascript - 单击导航菜单下拉菜单关闭

php - 为动态 JS 表创建行 ID

javascript - 如何知道 HTMLTableDataCellElement 的整个文本被选中

©2024 IT工具网  联系我们