Twitter Bootstrap Question posted in

email form outputting error (index):305 Uncaught TypeError: Cannot set property 'innerHTML' of null-Twitter bootstrap

so i have a bootstrap 4 contact form set up which is linked to a validateForm() function which (of course) validates the form and sends it to the mail.php file.

However, upon entering the details needed and clicking the button to send the email, the form does nothing. I don’t know whether the mail.php file is linked incorrectly or if its just my code.

this site is for an animation studio called Sutori Studios using the 000webhost hosting service as a live preview for them (which includes a system for email handling). I have checked to make sure its all linked together properly but i may have missed something.

<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 rn";
mail($recipient, $subject, $content, $mailheader) or die("Error!");
print json_encode(array('message' => 'Email successfully sent!', 'code' => 1));
exit();
?>

I expect to have an email delivered to the my mailbox but nothing gets sent through and i get an error in console stating:

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

Tags:

2

Answers


  1. 0

    You are trying to select an element with the id of status, but in your HTML there’s only an element with the class of status. So either add id="status" on the element, or change the JavaScript to select by class name instead.

    Select by class:

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

    Or

    document.getElementsByClassName('status')[0].innerHTML = "Sending...";
    Login or Signup to reply.
  2. 0

    You have a div, having the class of status:

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

    When you try to set its innerHTML, you are searching for an element having the id of status, which does not exist in your code:

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

    and this throws the error that you have seen. Also, you try to set its innerText in a callback:

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

    but again, you are searching for an element having an id of status. There are two ways to solve this, you can choose either of those, depending on your preference:

    Change the tag’s structure to have an id of status:

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

    and then your id selectors will find the element and your error will be fixed.

    Change the id selectors to class selectors

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

    and

    $(".status").text(data.message);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search