ошибка вывода формы электронной почты (индекс): 305 Uncaught TypeError: Невозможно установить свойство 'innerHTML' для null

Question

, поэтому у меня настроена контактная форма начальной загрузки 4, связанная с функцией validateForm(), которая (конечно) проверяет форму и отправляет ее в файл mail.php.

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

Этот сайт предназначен для анимационной студии Sutori Studios, использующей хостинг 000webhost в качестве предварительного просмотра для них (которыйвключает в себя систему обработки электронной почты).Я проверил, чтобы все было правильно связано, но я, возможно, что-то пропустил.

<section id="contact" class="anchor">
            <!--Section heading-->
    <h2 class="h1-responsive font-weight-bold text-center my-4">Contact us</h2>
    <!--Section description-->
    <p class="text-center w-responsive mx-auto mb-5">Do you have any questions? Please do not hesitate to contact us directly. Our team will come back to you within
        a matter of hours to help you.</p>

    <div class="row">

        <!--Grid column-->
        <div class="col-md-9 mb-md-0 mb-5">
            <form id="contact-form" name="contact-form" action="mail.php" method="POST">

                <!--Grid row-->
                <div class="row">

                    <!--Grid column-->
                    <div class="col-md-6">
                        <div class="md-form mb-0">
                            <input type="text" id="name" name="name" class="form-control">
                            <label for="name" class="">Your name</label>
                        </div>
                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-md-6">
                        <div class="md-form mb-0">
                            <input type="text" id="email" name="email" class="form-control">
                            <label for="email" class="">Your email</label>
                        </div>
                    </div>
                    <!--Grid column-->

                </div>
                <!--Grid row-->

                <!--Grid row-->
                <div class="row">
                    <div class="col-md-12">
                        <div class="md-form mb-0">
                            <input type="text" id="subject" name="subject" class="form-control">
                            <label for="subject" class="">Subject</label>
                        </div>
                    </div>
                </div>
                <!--Grid row-->

                <!--Grid row-->
                <div class="row">

                    <!--Grid column-->
                    <div class="col-md-12">

                        <div class="md-form">
                            <textarea type="text" id="message" name="message" rows="2" class="form-control md-textarea"></textarea>
                            <label for="message">Your message</label>
                        </div>

                    </div>
                </div>
                <!--Grid row-->

            </form>

            <div class="text-center text-md-left">
                <a class="btn btn-primary" onclick="validateForm()">Send</a>
            </div>
            <div class="status"></div>
        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-md-3 text-center">
            <ul class="list-unstyled mb-0">
                <li><i class="fab fa-youtube fa-2x"></i>
                    <p>Sutori Studios</p>
                </li>

                <li><i class="fab fa-twitter mt-4 fa-2x"></i>
                    <p>@SutoriStudios</p>
                </li>

                <li><i class="fas fa-envelope mt-4 fa-2x"></i>
                    <p>SutoriStudios@gmail.com</p>
                </li>
            </ul>
        </div>
        <!--Grid column-->

    </div>
        </section>
    </div>
</main>
<footer class="page-footer font-small unique-color-dark">

  <!-- Copyright -->
  <div class="footer-copyright text-center py-3">© 2019 Copyright:
    <a href="index.html">Sutori Studios</a>
  </div>
  <!-- Copyright -->

</footer>
<!--Main layout-->
  <!-- /Start your project here-->

  <!-- SCRIPTS -->
  <!-- JQuery -->
  <script type="text/javascript" src="js/prerequisite/jquery-3.3.1.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="js/prerequisite/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="js/prerequisite/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="js/prerequisite/mdb.js"></script>
  <script>
      function validateForm() {
            document.getElementById('status').innerHTML = "Sending...";
            formData = {
            'name'     : $('input[name=name]').val(),
            'email'    : $('input[name=email]').val(),
            'subject'  : $('input[name=subject]').val(),
            'message'  : $('textarea[name=message]').val()
            };


            $.ajax({
            url : "../public_html/mail.php",
            type: "POST",
            data : formData,
            success: function(data, textStatus, jqXHR)
            {

            $('#status').text(data.message);
            if (data.code) //If mail was sent successfully, reset the form.
            $('#contact-form').closest('form').find("input[type=text], textarea").val("");
            },
            error: function (jqXHR, textStatus, errorThrown)
            {
            $('#status').text(jqXHR);
            }
            });
      }
</script>

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$subject = $_POST['subject'];
header('Content-Type: application/json');
if ($name === '') {
    print json_encode(array('message' => 'Name cannot be empty', 'code' => 0));
    exit();
}
if ($email === '') {
    print json_encode(array('message' => 'Email cannot be empty', 'code' => 0));
    exit();
} else {
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        print json_encode(array('message' => 'Email format invalid.', 'code' => 0));
        exit();
    }
}
if ($subject === '') {
    print json_encode(array('message' => 'Subject cannot be empty', 'code' => 0));
    exit();
}
if ($message === '') {
    print json_encode(array('message' => 'Message cannot be empty', 'code' => 0));
    exit();
}

$content = "From: $name \nEmail: $email \nMessage: $message";
$recipient = "email.... (removed for privacy)";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $content, $mailheader) or die("Error!");
print json_encode(array('message' => 'Email successfully sent!', 'code' => 1));
exit();
?>

Я ожидаю, что письмо будет доставлено на мой почтовый ящик, но ничего не получено, и я получаюошибка в консоли:

(индекс): 305 Uncaught TypeError: Невозможно установить свойство 'innerHTML' для null в validateForm ((index): 305) в HTMLAnchorElement.onclick ((index): 264)

Answer 1

У вас есть div, имеющий класс status:

<div class="status"></div>

Когда вы пытаетесь установить его innerHTML, вы ищете элемент, имеющий id из status, которого нет в вашем коде:

document.getElementById('status').innerHTML = "Sending...";

, и это выдает ошибку, которую вы видели.Кроме того, вы пытаетесь установить его innerText в обратном вызове:

$('#status').text(data.message);

, но снова вы ищете элемент, имеющий id из status.Есть два способа решения этой проблемы, вы можете выбрать любой из них, в зависимости от ваших предпочтений:

Измените структуру тега, чтобы иметь идентификатор статуса:

<div id="status" class="status"></div>

и затем ваш *Селекторы 1023 * найдут элемент, и ваша ошибка будет исправлена.

Измените селекторы идентификаторов на селекторы классов

var statusTags = document.getElementsByClassName("status");
for (let statusItem of statusTags) statusItem.innerHTML = "Sending...";

и

$(".status").text(data.message);

Answer 2

Вы пытаетесь выбрать элемент с id из status, но в вашем HTML есть только элемент с class из status.Поэтому добавьте id="status" к элементу или измените JavaScript для выбора по имени класса.

Выбор по классу:

document.querySelector('.status').innerHTML = "Sending...";

Или

document.getElementsByClassName('status')[0].innerHTML = "Sending...";