Блог

Я застрял на этой проблеме уже несколько недель. Я пытаюсь отправить электронное письмо SMTP, используя данные формы, предоставленные, оставаясь на той же странице.

Я следил за многими примерами в Интернете, но, похоже, не могу собрать все это вместе, чтобы заставить его работать на меня. Я считаю, что проблема связана с получением данных из формы.

HTML

 <div id="form-messages"></div>
          <form method="post" action="" id="main-contact-form" >
            <div class="row wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms">
              <div class="col-sm-6">
                <div class="form-group">
                  <input type="text" id="name" name="name" class="form-control" placeholder="Name" required="required">
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <input type="email" id="email" name="email" class="form-control" placeholder="Email Address" required="required">
                </div>
              </div>
            </div>
            <div class="form-group">
              <input type="text" id="subject" name="subject" class="form-control" placeholder="Subject" required="required">
            </div>
            <div class="form-group">
              <textarea name="message" id="message" class="form-control" rows="4" placeholder="Enter your message" required="required"></textarea>
            </div>                        
            <div class="form-group">
              <input type="submit" class="btn-submit">
            </div>
          </form> 
  

jQuery / Ajax

 var form = $('#main-contact-form');
form.submit(function(event){
    event.preventDefault();
    var form_status = $('<div class="form_status"></div>');
    $.ajax({
        url: "http://localhost:8080/adb2/mailer.php",
        type: "POST",
        beforeSend: function(){
            form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn() );
        }
    }).done(function(data){
        form_status.html('<p class="text-success">Thank you for contacting us. We will contact you as soon as possible!</p>').delay(3000).fadeOut();
    });
});
  

PHP (mailer.php )

     <?php
    // Only process POST reqeusts.
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        // Get the form fields and remove whitespace.
        $name = strip_tags(trim($_POST["name"]));
        $name = str_replace(array("r","n"),array(" "," "),$name);
        $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
        $subject = trim($_POST['subject']);
        $message = trim($_POST["message"]);

         // Check that data was sent to the mailer.
        if ( empty($name) OR empty($subject) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
            // Set a 400 (bad request) response code and exit.
            http_response_code(400);
            echo "Oops! There was a problem with your submission. Please complete the form and try again.";
            exit;
        }

        require("phpmailer/PHPMailerAutoload.php");

        $mail = new PHPMailer();

        $mail->IsSMTP();
        $mail->Host = "xxxxxxxxxxxxxxxx"; 
        $mail->SMTPAuth = true;

        $mail->Username = "xxxxxxxxxxxxxxx";  // SMTP username
        $mail->Password = "xxxxxxxxxxxxxxx"; // SMTP password

        $mail->From = $email;

        $mail->AddAddress("xxxxxxxxxxx", "Website");

        $mail->WordWrap = 50;
        $mail->IsHTML(true);
        $mail->Subject = $subject;

        $mail->Body    = $message;
        $mail->AltBody = $message;

        // Send the email.
        if ($mail->Send()) {
            // Set a 200 (okay) response code.
            http_response_code(200);
            echo "Thank You! Your message has been sent.";
        } else {
            // Set a 500 (internal server error) response code.
            http_response_code(500);
            echo "Oops! Something went wrong and we couldn't send your message.";
        }

    } else {
        // Not a POST request, set a 403 (forbidden) response code.
        http_response_code(403);
        echo "There was a problem with your submission, please try again.";
    }
?>
  

После отправки формы он возвращает «POST http://localhost:8080/adb2/mailer.php 400 (плохой запрос)»

Если бы кто-нибудь мог указать мне правильное направление, я был бы очень признателен! Спасибо за чтение!

Понял это после еще некоторого копания. Я добавил переменную с именем «FormData» и сериализовал форму. После этого я передал его в вызов ajax, и теперь он работает. Ниже приведен исправленный jQuery / Ajax.

 var form = $('#main-contact-form');
var formMessages = $('#form-messages');
form.submit(function(event){
    event.preventDefault();
    var formData = $(form).serialize();
    var form_status = $('<div class="form_status"></div>');
    $.ajax({
        url: "http://localhost:8080/adb2/mailer.php",
        type: "POST",
        data: formData,
        beforeSend: function(){
            form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn() );

        }
    }).done(function(response){
        form_status.html('<p class="text-success">Thank you for contacting us. We will contact you as soon as possible!</p>').delay(3000).fadeOut();
        // Make sure that the formMessages div has the 'success' class.
        $(formMessages).removeClass('error');
        $(formMessages).addClass('success');

        // Set the message text.
        $(formMessages).text(response);

        // Clear the form.
        $('#name').val('');
        $('#email').val('');
        $('#subject').val('');
        $('#message').val('');
    }).fail(function(response) {
        // Make sure that the formMessages div has the 'error' class.
        $(formMessages).removeClass('success');
        $(formMessages).addClass('error');
    });
});