Ajax with PHPmailer

General PHP Help
#1

Hi there, i’m trying to use ajax with phpmailer to prevent the page from refreshing when the form is submitted and to display a “message sent” notification but I can’t get it to work.

I can get the form to submit and the message to show but it isn’t sending the email.

Does anyone have experience with this?

Thanks in advance

My contact form

<div class="alert alert-success contactform-messages" role="alert">
  Thank you for reaching out to us. We'll get back to you shortly!
</div>
   
            <form id="contact-form" method="post" action="contact2.php" role="form">

                <div class="messages"></div>

                <div class="controls">

                    <div class="row">
                        <div class="col-md-6">
                            
                            <div class="form-group">
                                <label for="form_name">Firstname</label>
                                <input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname" required="required" data-error="Firstname is required.">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="form_lastname">Lastname</label>
                                <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname" required="required" data-error="Lastname is required.">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="form_email">Email</label>
                                <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email" required="required" data-error="Valid email is required.">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="form_need">Phone</label>
                                <input id="form_email" type="text" name="phone" class="form-control" placeholder="Please enter your contact number">
                                <div class="help-block with-errors"></div>

                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="form_message">Message</label>
                                <textarea id="form_message" name="message" class="form-control" placeholder="Message for us" rows="4" required="required" data-error="Please, leave us a message."></textarea>
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="col-md-12 mb-3">
                            <input type="submit" name="send" class="btn btn-primary" value="Send Message">
                        </div>
                    </div>
                </div>
               </div>
            </form>
            </div>

My phpmailer script

    <?php

    use PHPMailer\PHPMailer\PHPMailer,
    use PHPMailer\PHPMailer\SMTP;
    use PHPMailer\PHPMailer\Exception;

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

    // Instantiation and passing `true` enables exceptions
    $mail = new PHPMailer(true);


    if(isset($_POST['send'])){
        $name = $_POST['name'];
        $surname = $_POST['surname'];
        $email = $_POST['email'];
        $phone = $_POST['phone'];
        $message = $_POST['message'];

    try {
        //Server settings
        $mail->SMTPDebug = 0;                      // Enable verbose debug output
        $mail->isSMTP();                                            // Send using SMTP
        $mail->Host       = 'smtp.office365.com';                    // Set the SMTP server to send through
        $mail->SMTPAuth   = true;                                   // Enable SMTP authentication
        $mail->Username   = 'xxx';                     // SMTP username
        $mail->Password   = 'xxx';                               // SMTP password
        $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;         // Enable TLS encryption; `PHPMailer::ENCRYPTION_SMTPS` also accepted
        $mail->Port       = 587;                                    // TCP port to connect to

        //Recipients
        $mail->setFrom('xxx', xxx');
        $mail->addAddress('xxx');     // Add a recipient
        $mail->addReplyTo($email);
       
    // Content
        $mail->isHTML(true);                                  // Set email format to HTML
        $mail->Subject = 'New Message - Website Contact Form';
        $mail->Body    = $name . "&nbsp" . $surname . "<br><br>" . $email . "<br><br>" . $phone . "<br><br>" .  $message;
        $mail->AltBody = $name . "&nbsp" . $surname . "<br><br>" . $email . "<br><br>" . $phone . "<br><br>" .  $message;

        $mail->send();
        echo 'Message has been sent';
        header("Refresh:0; url=index.php");
    } catch (Exception $e) {
        echo "Message could not be sent. Mailer Error: {$mail->ErrorInfo}";
        
    }}

And the ajax script

 <script>
         $("#contact-form").on('submit',function(event) {
            event.preventDefault(); // to prevent default page reloading
            var dataString = $(this).serialize(); // to get the form data
            $.ajax({
                type: "POST",
                url: "contact2.php",
                data: dataString,
                success: function(data){
                    $('#contact-form')[0].reset(); // to reset form data
                }
            }).done(function(data){
                setTimeout(function () {
                    $('.contactform-messages').addClass('active');
                }, 500);
            });
        }); 
    </script>
#2

I recommend that you add some debugging logic near the top of your php script to log all the submitted post data -

file_put_contents('log.txt',print_r($_POST,true),FILE_APPEND);

Once you do this, you will see that the ‘send’ form element is not set. The reason for this is because the javascript event handler is called first, then the submit field is set after the javascript returns/ends. You either need to use a hidden field named ‘send’ or if there is only one form involved, simply test if $_SERVER[‘REQUEST_METHOD’] == ‘POST’ in the conditional statement in the form processing code.

Also, if all the code in contact2.php is for processing the form data, you should put the phpmailer initialization related statements inside the conditional logic so that you don’t waste processing time should the url of that page get requested by something other then a post method form.

You should also validate the submitted data on the server and only use it if ‘required’ fields are not empty strings. If you use an array to hold any validation error messages, the array serves as an error flag. If the array is empty, there are no errors. If the array is not empty, there are errors. You can also json encode the errors array and return it to the ajax code to use for displaying the error messages on the page.

2 Likes
#3

I second change the change to the backend to use REQUEST_METHOD. You are checking a value that is never sent.

1 Like
#4

Thanks for the reply, I will check this out tomorrow when i’m back at work.

Sponsor our Newsletter | Privacy Policy | Terms of Service