PHPMailer Contact Form with Jquery

Question

I created contact form using phpmailer. and, it is working and send email fine. but, It does redirect in php file & then show message for successfully.

I want to show message on same contact form html page. and, I used below ajax jquery for that. but, mail does not send. and does get below message on same form html page.

There is a problem with the document!

How can i fixed this?

JS Code:

(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 Code:

<?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!";
    }
    
?>

Form HTML Code:

<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

I had same issue, i resolve with hidden input in form with random name like:

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

then in php file:

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

And work, the issue coming because form.serialize() or new FormData() don't use submit button.
Another way is include button submit like here

Answer 2

You have to remove the action="php/mail.php" method="post" because this is handled by jQuery and you have to add a hidden input like <input type="hidden" name="iamhidden" /> to the form and then replace the if(isset($_POST['submit'])) with if(isset($_POST['iamhidden']))