开发者问题收集

电子邮件表单输出错误（索引）：305 未捕获的类型错误：无法设置 null 的属性“innerHTML”

2019-04-12
60
javascript php html email

因此我设置了一个 bootstrap 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>[email protected]</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();
?>

我希望将电子邮件发送到我的邮箱，但是什么都没有发送，控制台中出现错误，指出：

(index):305 Uncaught TypeError: Cannot set property 'innerHTML' of null at validateForm ((index):305) at HTMLAnchorElement.onclick ((index):264)

2个回答

您有一个 div ，其类名为 status ： 

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

当您尝试设置其 innerHTML 时，您正在搜索一个 id 为 status 的元素，但该元素在您的代码中并不存在： 

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

这会引发您所看到的错误。此外，您尝试在回调中设置其 innerText ： 

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

但同样，您正在搜索一个 id 为 status 的元素。有两种方法可以解决这个问题，您可以根据自己的喜好选择其中一种：

将标签的结构更改为具有状态 id： 

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

然后您的 id 选择器将找到该元素，并且您的错误将被修复。

将 id 选择器更改为 class 选择器 

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

和 

$(".status").text(data.message);
Lajos Arpad
2019-04-12

您尝试选择一个 id 为 status 的元素，但您的 HTML 中只有一个 class 为 status 的元素。因此，请在元素上添加 id="status" ，或将 JavaScript 更改为按类名选择。

按类选择： 

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

或 

document.getElementsByClassName('status')[0].innerHTML = "Sending...";
Azer
2019-04-12