为什么表单提交消息显示我的index.html文件中的所有字符？

Question

When my message is submitted it goes to my email address and works fine, but the message success notification doesn't display 'Your message was sent successfully.', instead it displays all of the lines of code within my index file.

I think it has something to do with style="display: none".

Any idea how to show the 'Your message has been sent' message?

index.html

            <div class="col-lg-5 mx-auto">
              <div class="contact-form">
                <div class="container"> 
                    <form class="contact-form" method="post" action="mail.php">    

                    <!-- form message -->
                        <div class="row">
                            <div class="col-lg-12">
                              <div class="alert alert-success contact__msg" style="display: none" role="alert">
                              Your message was sent successfully.
                                </div>
                                </div>
                            </div>
                    <!-- end message -->

                    <!-- form element -->
                        <div class="form-group">
                            <label><strong>Name</strong></label>
                              <input name="name" type="text" class="form-control" placeholder="Enter Name" required>
                        </div>
                        <div class="form-group">
                            <label><strong>Email</strong></label>
                              <input name="email" type="email" class="form-control" placeholder="Enter Email" required>
                        </div>
                        <div class="form-group">
                            <label><strong>Message</strong></label>
                              <textarea name="message" class="form-control" rows="3" placeholder="Enter Message" required></textarea>
                        </div>
                        <button name="submit" type="submit" class="btn btn-default"><span class="fa fa-paper-plane"></button></span>
                    <!-- end form element -->
                    </form>
                        </div>
                </div>

mail.php

<?php

    if ($_SERVER["REQUEST_METHOD"] == "POST") {

        # FIX: Replace this email with recipient email
        $mail_to = "*myemail*@gmail.com";

        # Sender Data
        $name = str_replace(array("","
"),array(" "," ") , strip_tags(trim($_POST["name"])));
        $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
        $message = trim($_POST["message"]);

        if ( empty($name) OR !filter_var($email, FILTER_VALIDATE_EMAIL) OR empty($subject) OR empty($message)) {
            # Set a 400 (bad request) response code and exit.
            http_response_code(400);
            echo "Please complete the form and try again.";
            exit;
        }

        # Mail Content
        $content = "Name: $name
";
        $content .= "Email: $email

";
        $content .= "Message:
$message
";

        # email headers.
        $headers = "From: $name <$email>";

        # Send the email.
        $success = mail($mail_to, $subject, $content, $headers);
        if ($success) {
            # 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, 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.";
    }

?>

main.js

(function ($) {
    'use strict';

    var form = $('.contact-form'),
        message = $('.contact__msg'),
        form_data;

    // Success function
    function done_func(response) {
        message.fadeIn().removeClass('alert-danger').addClass('alert-success');
        message.text(response);
        setTimeout(function () {
            message.fadeOut();
        }, 100000);
        form.find('input:not([type="submit"]), textarea').val('');
    }

    // fail function
    function fail_func(data) {
        message.fadeIn().removeClass('alert-success').addClass('alert-success');
        message.text(data.responseText);
        setTimeout(function () {
            message.fadeOut();
        }, 100000);
    }

    form.submit(function (e) {
        e.preventDefault();
        form_data = $(this).serialize();
        $.ajax({
            type: 'POST',
            url: form.attr('action'),
            data: form_data
        })
        .done(done_func)
        .fail(fail_func);
    });

})(jQuery);

Answer 1

Check the success function you specify the response but not the text to display. e.g: message.text(response.??);

The field that contains the message from the back end script is not included so I’m guessing the issue is here. display:none is not the issue...