带有 Jquery 的 PHPMailer 联系表

Question

我创建了 contact form using phpmailer。并且，它正在运行并可以正常发送电子邮件。但是，它确实在 php 文件中重定向，然后显示成功消息。

我想在同一联系表 html 页面上显示消息。并且，我在下面使用了 ajax jquery。但是，邮件不发送。并在同一表单 html 页面上收到以下消息。

There is a problem with the document!

我该如何解决这个问题？

JS代码:

(function ($) {
    "use strict";

    var form = $('#contact-form'); // contact form
    var submit = $('#submit-btn'); // submit button
    
            // form submit event
            form.on('submit', function(e) {
                e.preventDefault(); // prevent default form submit
                $.ajax({
                    url: 'php/mail.php', // form action url
                    type: 'POST', // form submit method get/post
                    dataType: 'html', // request type html/json/xml
                    data: form.serialize(), // serialize form data
                    beforeSend: function() {
                        
                        submit.attr("disabled", "disabled");                    
                        var loadingText = '<span role="status" aria-hidden="true" class="spinner-border spinner-border-sm align-self-center mr-2"></span>Sending.....'; // change submit button text
                        if (submit.html() !== loadingText) {
                            submit.data('original-text', submit.html());
                            submit.html(loadingText);
                        }
                    },
                    success: function(data) {
                        //$('.alert-dismissible').remove();
                        submit.before(data).fadeIn(); // fade in response data 
                        form.trigger('reset'); // reset form
                        submit.html(submit.data('original-text'));// reset submit button text
                        submit.removeAttr("disabled", "disabled");
                    },
                    error: function(e) {
                        alert('error');
                    }
                });
            });
})(jQuery);

mail.php代码:

<?php

    use PHPMailer\PHPMailer\PHPMailer;
    use PHPMailer\PHPMailer\Exception;

    $myCompanyName = "CompanyName";
    $myCompanyEmail = "noreply@CompanyName.com";
    $myCompanyEmailPassword = "CompanyEmailPassword";
    
    $myPersonalEmail = "personalEmail@gmail.com";

    require './phpmailer/src/Exception.php';
    require './phpmailer/src/PHPMailer.php';
    require './phpmailer/src/SMTP.php';

    if(isset($_POST['submit'])) {

        $mail = new PHPMailer(true);

        //$mail->SMTPDebug = 0;

        $mail->Host = 'smtp.mboxhosting.com';
        $mail->SMTPAuth = true;
        $mail->Username = $myCompanyEmail;
        $mail->Password = $myCompanyEmailPassword;
        $mail->SMTPSecure = 'tls';
        $mail->Port = 587;

        $mail->setFrom($myCompanyEmail, $myCompanyName);
        $mail->addAddress($myPersonalEmail);
        $mail->addReplyTo($_POST['email'], $_POST['name']);

        $mail->isHTML(true);
        $mail->Subject = 'My Subject';
        $mail->Body = $_POST['message'];

        try {
            $mail->send();
            echo 'Your message was sent successfully!';
        } catch (Exception $e) {
            echo "Your message could not be sent! PHPMailer Error: {$mail->ErrorInfo}";
        }
        
    } else {
        echo "There is a problem with the document!";
    }
    
?>

表格HTML代码:

<form id="contact-form" action="php/mail.php" method="post">
              <div class="row">
                <div class="col-lg-6">
                  <div class="form-group">
                    <input name="name" type="text" class="form-control rounded-lg" required placeholder="Name">
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="form-group">
                    <input name="email" type="email" class="form-control rounded-lg" required placeholder="Email">
                  </div>
                </div>
              </div>
              <div class="form-group">
                <textarea name="message" class="form-control rounded-lg" rows="3" required placeholder="Tell us more about your needs........"></textarea>
              </div>
              <p class="text-center mt-5 mb-0">
                <button id="submit-btn" class="btn btn-outline-dark rounded-lg shadow-none d-inline-flex" name="submit" type="submit">Send Message</button>
              </p>
            </form>

Answer 1

我遇到了同样的问题，我用随机名称形式的隐藏输入解决了问题，例如：

<input type="hidden" name="test">

然后在 php 文件中：

if(isset($_POST['test'])) {

好了，问题来了，因为 form.serialize() 或 new FormData() 没有使用提交按钮。
另一种方法是包括按钮提交，如 here

Answer 2

您必须删除 action="php/mail.php" method="post"，因为这是由 jQuery 处理的，您必须向表单添加隐藏输入，例如 <input type="hidden" name="iamhidden" />，然后替换 if(isset($_POST['submit'])) if(isset($_POST['iamhidden']))

带有 Jquery 的 PHPMailer 联系表

PHPMailer Contact Form with Jquery

javascript

php

ajax

jquery

phpmailer